Mermaid diagram blog
The mermaid diagram blog is the longer, search-shaped writing: how a diagram type behaves, where a host falls short, and what to paste next.
Start here
How to view mermaid diagrams online, free and with no install
View Mermaid diagrams online by pasting code into a browser. No install, live preview, and PNG export. SVG and PDF are on Pro.
13 min read
Mermaid documentation, as a practical map of the official docs
Mermaid documentation mapped for daily use: where syntax lives, how a file starts, and how to read a parse error without guessing.
13 min read
Turn mermaid code to diagram output without a local install
Turn Mermaid code to diagram output in the browser, then fix the parse errors that usually block the picture. PNG is free. SVG is Pro.
11 min read
Mermaid diagram examples you can copy
Mermaid diagram examples for flowchart, sequence, class, ER, and state, each with a reason to use that shape. Copy the text into the editor.
10 min read
Mermaid diagram syntax that stays true across types
Mermaid diagram syntax rules that apply to every type: the keyword line, ids versus labels, quotes, and why the word end is reserved.
15 min read
How to render mermaid diagram output in a browser, a doc, or CI
How to render a Mermaid diagram in a browser editor, in Markdown, or with the mermaid CLI. Pick one path per picture.
9 min read
The mermaid format, from .mmd files to fences
The Mermaid format explained: a .mmd file is the diagram with no fence. A Markdown fence is the same text wrapped for a host that renders it.
12 min read
What is a mermaid diagram, and when should you write one
What is a Mermaid diagram? A text file that states a claim, plus the picture a renderer makes. When to write one, and when a whiteboard is enough.
16 min read
Mermaid draw: a diagram without design skills
Mermaid draw without a design tool. Type the claims, let layout place the boxes, and stop when the picture matches the sentence.
13 min read
How to make a diagram by picking the type first
How to make a diagram: choose flowchart, sequence, or ER before you draw a box. A beginner path into diagrams as code.
11 min read
Diagrams
Flow charts explained: symbols, types, and examples
Flow charts explained with the symbols that matter, the types teams mix up, and Mermaid examples you can paste into a free editor.
15 min read
A free block diagram generator that starts from text
A block diagram generator that turns a column count and a few labels into a grid. Uses Mermaid block-beta, which stays put when you add a box.
11 min read
An ERD diagram creator that stores the schema as text
An ERD diagram creator for entities, keys, and crow's foot lines you can diff. Write the schema as Mermaid instead of dragging tables.
11 min read
A use case diagram generator for actors and flows
A use case diagram generator in Mermaid, which has no use-case type. Model actors as circles and use cases as rectangles, or let AI draft the flowchart.
11 min read
A free class diagram creator for UML as code
A class diagram creator for fields, methods, and the four UML lines that are not interchangeable. Write the model as Mermaid and diff it.
12 min read
An EER diagram generator for subtypes, with an honest limit
An EER diagram generator for supertypes and subtypes. Mermaid draws crow's foot, not Chen specialization circles. Here is the pattern that still works.
12 min read
A schematic diagram creator for system sketches
A schematic diagram creator for system layers in text. Set the rows yourself with a block diagram instead of hoping a flowchart stays still.
12 min read
Flowcharts meaning, for a first diagram
Flowcharts meaning in plain language: a picture of steps and a branch. What the box and the diamond are for, plus a first Mermaid chart.
13 min read
A free sequence diagram maker that stays in text
A free sequence diagram maker for participants, requests, and replies. No signup. The syntax reference stays on the sequence diagram page.
10 min read
What is a flowchart used for? Twelve real jobs
What is a flowchart used for? Twelve jobs, from support triage to deploys, each specific enough to decide whether you need the picture.
14 min read
A sequence diagram from a user story, in order
Build a sequence diagram from a user story: one sentence, the actors it names, the messages in order, then the Mermaid. Not the generic tutorial.
11 min read
Mermaid block-beta examples for layers and grids
Mermaid block-beta examples you can copy: a one-column stack, a three-column row, and a grid with a single arrow. The syntax page stays the reference.
10 min read
A sequence diagram with loop, alt, and parallel
A sequence diagram with loop, plus alt and par. How the fragments nest, why each block needs its own end, and a retry you can paste.
10 min read
A data flow diagram generator built from flowchart shapes
A data flow diagram generator in Mermaid, which has no DFD type. Level 0 and level 1 using entities, processes, and data stores.
11 min read
Mermaid er diagram cardinality and crow's foot marks
Mermaid ER diagram cardinality: exactly one, zero or more, one or more, and zero or one. Which side holds the foreign key.
11 min read
How to build an org chart mermaid diagram
Build an org chart in Mermaid with a top-down flowchart for reporting lines, or a mindmap when you only need groups.
10 min read
Mermaid aws diagrams without fake service icons
Mermaid AWS diagrams with architecture-beta. There is no Lambda glyph. Put the service name in the label and keep icons generic.
11 min read
Sequence diagram alt and opt, and how they differ
Sequence diagram alt is a real fork. Opt is a branch that might not run. Examples for login failure, optional fraud checks, and a missing else.
11 min read
Make a flow chart in about five minutes
Make a flow chart in about five minutes from a messy process you already have. Cut it down, then write the Mermaid. Syntax stays on the tutorial.
9 min read
An example of a sequence diagram for login, an API, and checkout
An example of a sequence diagram for login, a single API call, and checkout payment. Three copy-ready Mermaid conversations, explained.
10 min read
Text to schematic diagram, from sentences to a grid
Text to schematic diagram: write the rows in sentences, then encode them as a block-beta grid. A workflow, not the design how-to.
11 min read
Use case diagram examples for a blog, a shop, and support
Use case diagram examples for a blog, a shop, and a support tool. Mermaid has no use-case type, so these are flowchart stand-ins with actors as circles.
11 min read
Tools
A mermaid diagram visual editor that keeps the text
A mermaid diagram visual editor is a code pane beside a live preview. Compare that with a drag-and-drop canvas, and when AI should draft the first text.
10 min read
Draw.io mermaid support: what it is, and when to leave
Draw.io mermaid support is a one-way bridge in recent diagrams.net builds. Check your Insert menu, and don't expect the same text back.
10 min read
Sequence diagram software, free and text-based
Sequence diagram software compared as two jobs: a canvas you drag, or text you review. Where a free Mermaid editor fits, without invented prices.
11 min read
Diagram tool free options developers actually keep
Diagram tool free options for developers: a whiteboard, an office suite, and diagrams as code. What to keep, and what to stop collecting.
10 min read
Dot language vs mermaid, when the layout is the point
Dot language vs Mermaid: DOT asks a layout engine to place a graph. Mermaid is documentation syntax with several diagram types.
11 min read
Lucidchart export to mermaid, by redrawing the decision
Lucidchart export to Mermaid is a redraw. Don't wait for a Download-as-Mermaid button. Move one decision flow, then stop maintaining both copies.
10 min read
Prompt to mermaid diagram, with prompts that survive a retry
Turn a prompt to Mermaid diagram text that parses. Name the type, the labels, and the decision. Five free AI uses is a lifetime total.
10 min read
A free online diagram tool for developers
A free online diagram tool you can open before you create an account. What the free editor includes, and what Starter and Pro add.
9 min read
Create diagram online free, with no signup wall
Create a diagram online free with no account: paste Mermaid, edit it, download a watermarked PNG. SVG is not part of the free export.
9 min read
A visio flowchart maker alternative that lives in text
Searched for a Visio flowchart maker? Type the decisions in Mermaid instead of dragging a stencil. No invented Visio prices, and no fake import button.
10 min read
Flowchart online tool options, compared for 2026
Flowchart online tool options in 2026: a GUI canvas, an office suite, or text in the repo. MermaidViewer is the text option, not a fake 27-tool study.
10 min read
Integrations
How typora mermaid blocks render, and where they stop
Typora mermaid blocks are fenced code tagged mermaid. What to check when the fence stays as code, and how to export when Typora's own dialog is unclear.
12 min read
Notion mermaid code block limits that show up after setup
Notion mermaid code block limits: beta types, theme frontmatter, a cramped column, and click lines that never run.
11 min read
Mermaid in gitlab issues, comments, and wikis
Mermaid in GitLab issues and comments: fences, preview before you submit, version skew, and click handlers that GitLab will not run.
10 min read
VSCode mermaid preview settings that change the picture
VS Code mermaid preview settings: built-in Markdown preview, where to search, security levels that blank a diagram, and why save matters.
11 min read
Jupyterlab mermaid diagrams in notebook markdown
JupyterLab mermaid fences in notebook Markdown. Some versions draw them, some leave code. Check your install before you assign the notebook.
10 min read
IntelliJ markdown mermaid preview in JetBrains IDEs
IntelliJ markdown mermaid preview via the JetBrains Markdown plugin. Search settings for Mermaid. The menu name moves between releases.
10 min read
Mermaid viewer vscode options, compared
Mermaid viewer options in VS Code: the built-in Markdown preview, Markdown Preview Mermaid Support, and a browser editor when you need live updates.
10 min read