Handy Orchard

Mermaid diagram preview

Preview a restricted Mermaid flowchart or sequence diagram locally and download the rendered SVG.

Your input

Start with flowchart TB/TD/LR/RL/BT or sequenceDiagram. One node or A --> B per statement; labels use [ ], ( ) or { }. Sequence supports participant/actor and message arrows.

Outputs are cleared when the input changes.

Result

Enter your data or use the example, then run the tool.

Worked example

flowchart TB with A[Start] --> B{Check} and B --> C[Done] produces three connected nodes.

sequenceDiagram with participant A, participant B and A->>B: Hello produces a message between participants.

Method

A fixed Mermaid build parses and renders the validated subset with strict security, plain SVG labels and Dagre layout.

The isolated renderer sanitizes SVG and gives it a fixed dark background; there are no remote images, links or runtime CDN assets.

Limits

At most 8,000 characters and 100 statements, 60 flow nodes or 20 sequence participants, and 80 edges/messages. Only ASCII node identifiers are supported.

No subgraphs, loops, directives, custom styles, HTML, interactive links or other Mermaid diagram types. This is not a hard-interruptible worker renderer.

Sources

Actual pinned upstream sourceThird-party notices

Related tools

Graph network explorerSVG path editorJavaScript AST explorer

Your inputs stay on this device. Only optional, consented page visits are measured. Input values, files, filenames and processing logs are not sent to Analytics.

When switching languages, text, settings and selected files are temporarily kept on this device. Transfers are removed after restoring; interrupted transfers are cleaned up on a later visit. Inputs and files are never uploaded.