DotMDA Markdown viewer for Macthat draws Mermaid diagrams.
Write a diagram as text in a code block marked mermaid, and DotMD draws it on the page. Nothing leaves your Mac: it works offline, in the light or the dark theme.
macOS 14 or later. Reading is free; editing and reviews are one payment.
Quick answer
DotMD is a Markdown viewer for Mac with Mermaid support. A code block marked mermaid is drawn as a flowchart, sequence, class, state or entity-relationship diagram, a Gantt chart, pie chart, mind map, timeline or git graph, offline and in the colours of your theme. Viewing is free; writing with a live preview comes with DotMD Editor.
Which Mermaid diagrams does DotMD draw?
DotMD has Mermaid 10.9 built in. It draws these kinds of diagram, and the editor has a ready template for each:
- Flowcharts and state diagrams: steps, decisions and transitions.
- Sequence diagrams: who sends what to whom, in order.
- Class diagrams and entity-relationship diagrams: types, tables and how they relate.
- Gantt charts and timelines: plans and events over time.
- Pie charts, mind maps and git graphs.
A diagram stays as text in your .md file, so it is easy to change, and every change shows in the version history.
How to view Mermaid in a Markdown file on a Mac
A code block marked mermaid becomes a diagram on the page instead of showing its source.
-
Open the file
Press ⌘O and choose the .md file or its folder, or drag it onto DotMD. Each diagram is drawn when the page opens.
-
Look closer
Click a diagram to see it large over the page. Pinch to zoom up to 8×, drag to move it, and press Esc to go back.
-
Match the theme
Diagrams follow the page: they are drawn in light or dark colours to match the theme you pick in the Aa menu.
Write Mermaid with a live preview
Editing is part of DotMD Editor. Press Edit or ⌘E and turn on Preview (⌥⌘E): the diagram redraws next to the text as you type, and a click on it jumps to its source.
Insert → Diagram puts a working example of any of the ten kinds into your file, ready to edit.
Mermaid in Quick Look, PDF and HTML
Press Space on a .md file in Finder and the preview shows its diagrams too: Markdown preview with Quick Look.
Export as PDF… draws the diagrams before it makes the PDF: Markdown to PDF on a Mac. An exported HTML file loads Mermaid from the internet when you open it.
When a diagram does not appear
- Check the first line: it names the kind of diagram, such as
flowchart TDorsequenceDiagram. - Put a label that contains brackets, colons or quotes in
"double quotes". - A mistake in the syntax shows Mermaid's error message in place of the drawing.
Questions about Mermaid on a Mac
Does DotMD show Mermaid diagrams offline?
Yes. Mermaid is built into DotMD and draws on your Mac, with no internet connection. Only an exported HTML file loads it from the internet.
Is viewing Mermaid diagrams free?
Yes. Reading Markdown with diagrams, folders, tabs and Quick Look is free, forever. Editing with a live preview is part of DotMD Editor, $14.99 once.
Which Mermaid diagrams can I use?
Flowcharts, sequence, class, state and entity-relationship diagrams, Gantt charts, pie charts, mind maps, timelines and git graphs. The editor has a template for each.
How do I edit Mermaid with a live preview?
With DotMD Editor, press ⌘E and then ⌥⌘E. The diagram redraws next to the text as you type.