Mermaid lessons for real diagrams

A practical guide to the Product delivery flow template: directions, shapes, link styles, decisions, subgraphs, and common gotchas.

Learn participants, actors, arrows, activation, notes, control blocks, and advanced Mermaid sequence features.

Learn relationships, cardinality markers, and attribute blocks used in the Simple data model template.

Learn stateDiagram-v2, start/end markers, labeled transitions, notes, and nested states for the Diagram lifecycle template.

Learn roots, shapes, indentation, and markdown labels used in the Workspace map template.

Learn class blocks, visibility, relationships, and stereotypes used in the Editor modules template.

Learn periods, events, sections, wrapping, and direction used in the History of Social Media template.

Learn SysML-style requirements, elements, relationship types, and direction used in the Login requirements template.

Learn titles, quoted slice labels, numeric values, and showData used in the Traffic sources template.

Learn titles, dateFormat, sections, tasks, and after dependencies used in the Product launch plan template.

Learn commits, branches, checkout, and merges used in the Feature branch merge template.

Learn C4Context persons, systems, external systems, and relationships used in the Notes app context template.

Learn sankey CSV flows (source, target, value) used in the Budget allocation template.

Choose a Preview theme (neutral, forest, dark, …), override colors with themeVariables, and style individual flowchart nodes with classDef.