What should happen to the id attribute? Should it move to the <picture> element? Should the <picture>, <source>, and <img> elements all get id attributes?
Can we support the inline-svg strategy? What would it look like?
Could mermaid support responsive dark mode upstream instead? Definitely not for the PNG output, but maybe it can for SVG output?
What should happen to the id attribute? Should it move to the element? Should the , , and elements all get id attributes?
Easiest option, which would be backward compatible is to leave it on <img> (I think)
Can we support the inline-svg strategy? What would it look like?
Ideally (but not possible with mermaid, I think) if all colors would be specified using CSS-variables (or CSS classes), then Inline SVG could be styled with CSS, just as any other element. Then it would be enough to render one inline SVG and dark theme would be implemented witth the help of CSS.
A bit of context: I'm looking for "ideal" diagram solution for Astro. See my post
I have some insights for your research:
I wrote mermaid-isomorphic to make dealing with Mermaid diagrams from Node.js easier. It uses Playwright under the hood and is thoroughly tested to resolve unexpected rendering issues. It also supports bulking the rendering of diagrams in a single browser page to keep the browser overhead to a minimum.
mermaid-cli is a CLI and uses Puppeteer. It’s primary goal is not to provide a Node.js interface. It’s affected by some of the issues solved by mermaid-isomorphic.
The remark-mermaid package is no longer maintained. It was made by an organization that appears to have vanished.
You shouldn’t use remark-mermaidjs. You should only use remark plugins to transform markdown. To transform HTML, use rehype plugins. The only reason remark-mermaidjs isn’t formally deprecated, is because it’s used by gatsby-remark-mermaid.
What should happen to the id attribute? Should it move to the
Easiest option, which would be backward compatible is to leave it on (I think)
Backwards compatibility isn’t an issue if we add a new option. The HTML output is going to be different anyway.
Can we support the inline-svg strategy? What would it look like?
Ideally (but not possible with mermaid, I think) if all colors would be specified using CSS-variables (or CSS classes), then Inline SVG could be styled with CSS, just as any other element. Then it would be enough to render one inline SVG and dark theme would be implemented witth the help of CSS.
Hence the idea that maybe support could be added by Mermaid instead.
Anyway, we could support dark mode for the img-png and img-svg strategies first, and investigate the inline-svg strategy later. Note that you need the inline-svg strategy if you want people to be able to search the text.
The mermaid CSS targets the id, which is relevant only for the inline-svg strategy.
I’m not entirely sure why I added it for the other strategies. I suppose because the information is available. :shrug: It allows you to link the diagram using a URL hash, or target it using CSS. I’m not sure if that’s useful. Maybe I should remove it in the next major version.
It seems they (Astro team) had the similar problem with Shiki highlighter, which doesn't support css variables, so they are putting some predefined colors and replace with variables before outputting
I was wondering if this is a good idea, for
img-png
,img-svg
generateinstead of
for this it needs to prernder diagram 2 times:
{ theme: 'dark' }
)