Mermaid syntax reference
Worked syntax pages for the Mermaid diagram types makesPDF renders — starting with flowcharts, sequence diagrams, gantt charts, pie charts and xychart-beta. Every example is drawn by the same renderer that produces the PDF. Copy one, render it, ship it.
Diagram types
Mermaid flowchart syntax: nodes, edges and subgraphs with examples
Mermaid flowchart syntax with rendered examples: directions, node shapes, edge styles and labels, subgraphs, and a flow you can render to PDF.
Mermaid sequence diagram syntax: participants, messages and notes with examples
Mermaid sequence diagram syntax with rendered examples: participants and aliases, message arrows, notes, actors, and numbered message flows.
Mermaid gantt chart syntax: sections, tasks and milestones with examples
Mermaid gantt chart syntax with rendered examples: sections, task durations, after dependencies, milestones and done/active/crit styling.
Mermaid pie chart syntax: slices, titles and percentages with examples
Mermaid pie chart syntax with rendered examples: labelled slices, proportional values, chart titles, and the showData option that puts values in the legend.
Mermaid xychart-beta syntax: bar and line charts with examples
Mermaid xychart-beta syntax with rendered examples: titles, axis labels and ranges, bar and line series, and multiple series on one chart.
Every page shows the Mermaid source next to the rendered diagram — render any of them straight to PDF on the Markdown tool, or read how diagram blocks work in the Markdown documentation.