Mermaid diagrams in Markdown to PDF
Each mermaid fence becomes a vector drawing where it is written. Text in the diagrams stays sharp at any zoom and the layout follows the page.
One toggle, every diagram kind. Each ```mermaid fence becomes vector art where it is written; with diagram pages on, each gets a page of its own at the end of the PDF (toggle: mermaid_appendix).
Flowcharts
A decision flowchart with labeled edges and every node shape, inside a returns procedure for an online retailer.
Flowchart shapes, edges & subgraphs
The shape vocabulary, every edge kind with labels, and subgraphs that group nodes into departments, with left-to-right and top-down direction.
Sequence diagrams
Participants, request and reply arrows, activation bars, notes, and alt, else, loop and par frames, in a payment operations note for an online shop.
Class diagrams
Inheritance, interfaces, composition and aggregation, multiplicities on the edges and typed members, for a library lending system.
State diagrams
Composite states with their own direction, choice and fork pseudostates, start and end markers and notes, for the lifecycle of an insurance claim.
Entity relationship diagrams
Crow's-foot cardinalities, identifying and non-identifying relationships, and typed attribute blocks with key markers, for an airline booking model.
Gantt charts
Sections, after dependencies, done, active and critical states, milestones and an axis that skips weekends, for a bridge refurbishment.
Git graphs
Branches, merges, highlighted commits and release tags for a mobile app's release train, with the main branch named in the init directive.
Mindmaps
A radial mind map with a color per branch and nested levels, inside the planning brief for an international conference.
Timelines
Sections and multi-event periods, each event on its own card, in the history page of an annual report for a bicycle-sharing network.
User journeys
Scored steps with actors across sections. The score sets the face and the row, for a hotel guest's stay from booking to checkout.
Kanban boards
Columns with cards, ticket ids, assignees and priority stripes via @{ ... } metadata, for the editorial board of a magazine issue.
C4 context & container diagrams
Persons, systems, databases, queues and enterprise boundaries with labeled relationships, then the containers inside one system, set in an architecture decision record for a university.
Architecture diagrams
Grouped services with icons and edges that name the side they leave and enter, used as the picture in the runbook for a retailer's nightly data load.
Block diagrams
A column grid with nested blocks, spacers, shaped nodes and arrows between them, laid out as a factory floor from goods-in to dispatch.
Packet diagrams
Bit-range rows for a binary layout with the bit ruler across the top: the TCP header, as in a networking textbook.
Requirement diagrams
Requirements with id, text, risk and verification method, and the elements that satisfy and verify them, inside a safety case for lift control software.
Venn diagrams
Sets as overlapping circles with a label on each overlap, sized by the counts you give, for the skills three new roles share in a data team.
Wardley maps
Components placed by visibility to the user and by evolution from genesis to commodity, with dependencies, a planned move and notes, for a bakery chain's online ordering.
Fishbone (Ishikawa) diagrams
A problem at the head and its causes on the bones, grouped by category and nested a level deeper, for late deliveries at a furniture maker.
Cynefin frameworks
Items sorted into the clear, complicated, complex and chaotic domains and confusion, with arrows for the moves between them, for a hospital IT service desk.
Tree views
A folder and file tree drawn from an indented list, with connecting lines at every level, for the handover package of an architecture project.
Event models
Screens, commands, events and read models in time frames, with the views that read from each event, for a city library's loan service.
Railroad diagrams
Grammar rules drawn as tracks with choices, repeats and optional parts, written in ABNF, for the booking reference format of a ferry company.
ZenUML sequence diagrams
Sequence diagrams written as method calls with blocks, conditions and return values, in ZenUML syntax, for the order service of an online pharmacy.
Swimlane diagrams
A process laid out in one lane per team, with steps that cross from lane to lane, for a patient referral between a clinic and a hospital.
Use case diagrams
Actors, use cases inside a system boundary, and the links between them, for a city's online parking permit service.
Agent flow diagrams
An AI agent's steps as typed nodes: inputs, tasks, tool calls and decisions, inside a flow, for the triage agent of a customer support team.
The sample documents describe invented organizations in several countries. All names and figures are illustrative.