Using Mermaid with ArchBoard

Why use both

Mermaid lives happily in a README and renders on code hosts, while a whiteboard is better for exploring and polishing. ArchBoard lets you move between them: paste Mermaid text and get editable shapes, or export a flowchart selection back to Mermaid text for your documentation.

Importing

Open Tools, choose Mermaid import and export, and paste your text. A live preview shows the result and any parse error. Flowcharts, sequence diagrams and class diagrams become native shapes you can restyle and rearrange. Other diagram types arrive as an image, which is how the underlying converter behaves. Mermaid runs locally in the browser with its strict security setting, so nothing is sent anywhere.

Exporting

Select the shapes you want, or leave nothing selected to use the whole page, and open the export tab. Rectangles, ellipses and diamonds connected by bound arrows become flowchart nodes and edges, with labels preserved and dashed arrows kept dashed. Anything Mermaid cannot express faithfully, such as freehand strokes, is skipped rather than approximated, and the dialog shows how many nodes and edges were exported.

A workable routine

Sketch and refine in ArchBoard, export to Mermaid when the structure is stable, and commit the text beside your code. When the design changes, edit the Mermaid text and re-import it to regenerate shapes. Use auto-layout afterwards to tidy the result in one click.

Limits worth knowing

Mermaid is a text language with its own layout engine, so exact positions do not survive a round trip. Expect the structure and labels to come back, and plan to re-run auto-layout rather than hand-place nodes you intend to export again. Styling you add in the canvas, such as colours and icons, is not represented in Mermaid text, which keeps documentation diagrams simple and consistent.

Try it with a template

• Pub/Sub Fan-Out
• Cache-Aside Pattern