Studio

Compatibility Lab

This first build focuses on real Mermaid source. Paste a diagram, choose a target preset, and use the conservative checks to harden the output before you ship it.

Mermaid source

Preview ready

%%{init: {"theme":"base","themeVariables":{"primaryColor":"#cff8ef","primaryTextColor":"#0b2c30"}} }%%
flowchart LR
    idea[Paste architecture notes]
    draft[Generate first Mermaid draft]
    lint[Run compatibility scan]
    repair[Auto repair the risky parts]
    export[Publish to GitHub end]
    idea --> draft --> lint --> repair --> export
    click export "https://github.com" "Open GitHub"

Rendered preview

Mermaid 11 renderer

Paste Mermaid to preview the diagram.

Diagnostics

3 checks

warning

Theme and init directives are brittle in conservative targets

Some publishing surfaces sanitize or ignore init blocks. MermaidPen can strip them for a safer export.

Repair available in this build

note

Interactive click directives may be disabled

Treat click actions as an enhancement, not a guaranteed cross-platform behavior.

warning

Lowercase end inside a node label is risky

Mermaid flowcharts treat end as a control keyword in some contexts. Capitalizing it avoids a class of hard-to-debug parse failures.

Repair available in this build