Done

Support for mermaid embed config

Currently mermaid blocks doesn't support configs. It shows "The diagram uses unsupported interactive or external content"

Expected

It should render the flowchart in the said look and theme

6 Comments

Den

·about 12 hours ago

Thanks for the clear example! Mermaid diagrams now support frontmatter config, so your diagram renders with look: handDrawn exactly as written. You can also set theme (e.g. forest, neutral, dark) and layout (dagre, elk), either globally under config: or per diagram type (e.g. config: flowchart: look: handDrawn). We also upgraded to Mermaid 12.1. A couple of limits: only appearance settings (look, theme, layout, handDrawnSeed) are supported for now, so custom colours via themeVariables and %%{init: …}%% directives still aren't. This will ship in the next release.

Alaz Oz·about 12 hours ago

I am not sure what you meant by globally
Does it applies to all the diagrams on a page?
Or All the diagrams in the space?

And, thanks ❤

Den

·about 12 hours ago

Sorry, "globally" was a poor choice of word. The config only applies to the diagram it's written in, i.e. that one mermaid code block. It doesn't affect other diagrams on the page or in the space.

What I meant is the difference between these two forms, both inside a single code block:

---
config:
  look: handDrawn
---

applies to whatever diagram follows it, and

---
config:
  flowchart:
    look: handDrawn
---

applies only if that block is a flowchart.

So for now, each diagram that should be hand-drawn needs its own frontmatter. If a page-wide or space-wide default would be useful to you, let us know and we'll track it as a separate request.

Alaz Oz·about 12 hours ago

Thanks for the clarification. ❤ It is good enough for the most part.

Alex Lins (Bao)

·about 17 hours ago

Thanks for reporting this! I can see you've shared a screenshot showing what you'd like mermaid diagrams to look like with custom config applied.

To help us move this forward, could you clarify a couple of things:

What specific mermaid configs are most important to you? (e.g., theme, font size, colors, layout direction?) Are there particular diagrams or use cases where the default rendering doesn't work for your needs?
How are you currently embedding the mermaid blocks? Are you using a code fence with a language tag, or another method? And when you say "unsupported interactive or external content" — is that the exact error message you're seeing, or a description of what happens?

This'll help us understand the scope and priority.

Alaz Oz·about 16 hours ago

handDrawn look is my number 1 priority.
Codefence with mermaid tag.

Finally some relevant questions 🙏 Thankyou