18 Jan 2026

Process

• use Mermaid code syntax to generate diagrams with code
• LLM of your choice to generate code based on solution design & workflow description (as of today, Gemini Pro or Claude 4.5 are the best)
• copy-paste code to either VS Code (with extension Mermaid Preview), my approach, or https://mermaid.live to visualise & tweak as needed
• export to .svg or .png from either VS Code's Mermaid Preview extension or Mermaid Live

What is Mermaid

Mermaid is a text-based diagramming syntax that lets you describe diagrams in plain text and render them automatically into visuals.

You write simple code → Mermaid turns it into diagrams.

What it’s used for
• Architecture diagrams
• Flowcharts
• Sequence diagrams
• System workflows
• Documentation diagrams (Markdown, GitHub, Notion, Obsidian, etc.)

Why people use it
• Version-controllable (lives in text files)
• Easy to edit and diff
• Renders automatically in many tools
• No drag-and-drop UI needed

Common diagram types
• Flowcharts
• Sequence diagrams
• Class diagrams
• State diagrams
• Entity-relationship diagrams
• Gantt charts

Minimal example

flowchart TD
A[User] --> B[App]
B --> C[Database]

Where it works
• GitHub & GitLab Markdown
• VS Code (Mermaid preview)
• Obsidian / Notion
• Static site generators
• Many documentation platforms

Think of Mermaid as “diagrams as code” — like Markdown, but for visuals.