Rendering should not depend on a CSS reset

[silverwind]

Description

The mermaid rendering depends on certain CSS styles like p {margin: 0} to correctly render, which is bad because it forces a dependency on a CSS reset (which one?) onto the consumer.

On mermaid.live these styles are provided by the tailwindcss base, but it should not be assumed that the consumer also uses tailwindcss or any other CSS reset. It should render correctly with default browser styles.

Steps to reproduce

1. Open https://mermaid.live/edit#pako:eNolizEKwzAMAL9iNJq8wHO7dUoyaohqq4lpLAdhE4rx35vS7TjuGvgcGBy89nz6jbSYx4gy36e5NYTF2pElsEZZzaH5uXOydkHoHQZIrIliuO6GYgxC2TgxgrswkL4RUH4d1ZKnj3hwRSsPUI9AhW-RVqX0l_0Lhvsu7Q
2. Disable the following CSS rule from tailwind base in browser DevTools:

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
  margin: 0;
}

Screenshots

Actual:

Expected:

Setup

• Mermaid version: 10.5.0
• Browser and Version: all

Suggested Solutions

Either add the missing styles via JavaScript or provide a (hopefully scoped) CSS file as part of the npm module so that mermaid charts render correctly with default browser styles.

[shakthi2003-ice]

Hey
can you please assign me this issue