Mermaid diagram render support

[scotto]

And that causes the mermaid diagram to render?

[Richard_Yu]

For the demonstration:

[huy]

So there are 3 plugins to get a mermaid diagram out?

• GitHub - hkgnp/logseq-mermaid-plugin
• GitHub - xyhp915/logseq-fenced-code-plus: A Logseq plugin for missing types of fenced code 🚀
• GitHub - npgrosser/logseq-diagrams-as-code: Logseq plugin that lets you create diagrams from textual representation (aka 'Diagrams as Code')

What’s the best one?

[Aryan]

Logseq Fenced Code plus is the best in most cases. It’s 100% local.

[LShark]

I just started using Fenced Code Plus, and it works like a charm. Just one thing about it: I use a dark theme, and it renders all the lines in black. So I added this to my custom.css and now I’m very happy!

div.mermaid {
  background-color: rgba(255, 255, 255, 1) !important;
}

[bitbonk]

Is there a way to make mermaid render in the iOS app?

[danzu]

Not at this time. Plugin support for mobile must be implement first.

[Jc12]

Could you help with code to reduce the scale size of the mermaid svg?

[jffroy]

Is there any way to get Logseq to render a diagram inline from a file reference, just like it does for an image file?

And could Fenced Code Plus support theming and customization? I use a line like this at the start of my diagram:

%%{init: {‘theme’: ‘none’, ‘themeVariables’: { ‘edgeLabelBackground’: ‘#fff’}}}%%

but it has no effect within Logseq.