Guides
26 guides on mermaid. Practical writing from the team building Atlas, useful whether or not you buy anything.
Mermaid's kanban diagram renders a board (columns and cards) from indented text, giving you a versionable snapshot of work that lives right in your docs.
The Mermaid pie chart is the simplest data diagram in the language (a title and a handful of label-value pairs) but choosing when to use one is where the real skill lies.
Mermaid's xychart-beta brings actual bar and line charts to the text-based world: define the axes, drop in your data arrays, and render a chart without a charting library.
When you want blocks in a deliberate grid rather than an auto-arranged graph, Mermaid's block-beta gives you column control, spanning widths, and nesting.
Mermaid's requirement diagram brings SysML-style requirements modeling to text: declare requirements, link them to the elements that satisfy them, and trace verification.
Mermaid's journey diagram maps a process from the user's point of view, scoring each step by satisfaction so the low points that need fixing stand out.
The classic two-by-two matrix (effort versus impact, urgent versus important) is a Mermaid quadrantChart, built from two axis labels and a list of plotted points.
A Sankey diagram shows how a quantity flows and splits, with ribbon widths sized to value. Mermaid builds one from three columns of CSV-style data.
The C4 model describes software at four zoom levels, and Mermaid lets you write the top three as text: this guide covers the C4Context, C4Container, and C4Component syntax.
Explaining a branching strategy in words is painful; Mermaid's gitGraph draws the commits, branches, and merges from a few readable commands.
Mermaid's mindmap uses nothing but indentation to build a hierarchy, so an outline you already have becomes a mind map with almost no extra syntax.
The Mermaid timeline diagram turns a list of dates and events into a clean chronological visual. This guide covers the exact syntax, the grouping tricks, and where it fits.
PlantUML, Mermaid, and draw.io are three of the most popular ways developers make diagrams. Two are code-based and one is visual. Here is a fair look at when each fits.
The Mermaid snippets you look up again and again, collected in one quick reference across every major diagram type.
Mermaid inside Markdown means diagrams that live in your docs and update with a text edit. Here is how to use it across the big platforms.
You wrote some Mermaid: now how do you see it? Here is every practical way to render Mermaid diagrams, from GitHub to your own website.
Mermaid and PlantUML are the two heavyweights of diagram-as-code. Here is an honest comparison to help you pick the right one.
Diagram-as-code treats diagrams like source: written in text, versioned in Git, reviewed in pull requests, and never out of date.
Typing beats dragging for a lot of diagrams. Here is the full landscape of tools that turn text into diagrams, and how to pick one.
A state diagram shows the states something can be in and how it moves between them. Mermaid makes state machines quick to write and revise.
A gantt chart shows a project's tasks across a timeline. Mermaid lets you write one in text and update it as fast as the plan changes.
Entity-relationship diagrams model database structure. Mermaid lets you write them in text and keep them versioned next to your schema.
Class diagrams model the structure of object-oriented code. Mermaid lets you write them in text and keep them next to the code they describe.
Everything you need to write Mermaid flowcharts: every node shape, arrow style, and layout option, with real syntax you can paste and adapt.
Sequence diagrams show how parts of a system talk to each other over time. Mermaid makes them fast to write and easy to keep current.
Mermaid turns plain text into diagrams. Write a few lines of readable syntax and get a flowchart, sequence diagram, or gantt chart: no dragging boxes.
Ready when you are
Atlas brings tasks, projects, CRM, contracts, e-signature, PDF tools, and analytics into one workspace. Start free.