Diagram Creator — HelpyTools

Type Direction

Mermaid

Load

Diagram

100%

Flowchart — header & node shapes

flowchart TDHeader — top to bottom (also LR, BT, RL)

A[Box]Rectangle — a process step

A(Rounded)Rounded rectangle

A([Stadium])Stadium — start or end

A{Decision}Diamond — a branch

A[(Database)]Cylinder — storage

A((Circle))Circle — a junction

A[/Input/]Parallelogram — input or output

A[[Subroutine]]Framed box — a sub-process

Flowchart — links between nodes

A --> BArrow

A --- BPlain line, no arrowhead

A -.-> BDotted arrow

A ==> BThick arrow

A -->|label| BArrow with a label

A -- text --> BArrow with a label (alt syntax)

A & B --> CTwo sources into one target

A ----> BLonger arrow — pushes B further away

Flowchart — grouping & styling

subgraph Name … endGroup nodes into a labelled box

classDef warn fill:#feeDefine a reusable node style

class A,B warnApply a style class to nodes

A:::warnApply a style class inline

style A stroke-width:3pxStyle one node directly

Swimlane

swimlane-betaHeader line — the bare swimlane is not a diagram type

swimlane-beta LRLanes as rows, flow left to right (TD makes them columns)

subgraph Customer … endEach subgraph is one lane, labelled by its name

A([Order]) --> B[Pay]Inside a lane — every flowchart shape works

B --> CAcross lanes — links may cross freely

A -->|label| BLabelled links, as in a flowchart

classDef warn fill:#feeStyling works too (apply with A:::warn)

Sequence — participants & messages

sequenceDiagramHeader line

participant A as AliceDeclare a participant with a display name

actor BParticipant drawn as a stick figure

A->>B: textSolid arrow — a call

A-->>B: textDashed arrow — a reply

A->B: textSolid line, no arrowhead

A-xB: textCross — a lost message

A-)B: textOpen arrow — async, no reply expected

A->>A: textSelf-message — a loop back to itself

autonumberNumber every message

Sequence — structure & notes

alt … else … endAlternative paths

opt … endOptional path

loop label … endRepeated section

par … and … endParallel actions

critical … option … endCritical section with fallbacks

break … endStops the flow early

activate AStart an activation bar (deactivate ends it)

A->>+B: textActivate on send, - deactivates on reply

Note over A,B: textNote spanning participants

Note right of A: textNote beside one (also left of)

box Name … endGroup participants into a labelled box

rect rgb(230,230,240)…endColoured band behind a section

State machine

stateDiagram-v2Header line

[*] --> IdleStart state (and Idle --> [*] to end)

Idle --> Busy: startTransition with a trigger label

state "Long name" as sGive a state a readable label

Idle : descriptionAdd a line of description to a state

state A { … }Composite state with its own inner machine

state c <<choice>>Decision point

state f <<fork>>Split into parallel paths (<<join>> rejoins)

--Divides concurrent regions inside a composite

note right of Idle : textAttach a note

direction LRLay the machine out left to right

classDef warn fill:#feeStyle states (apply with class A warn)

User journey

journeyHeader line

title Buying a ticketJourney title

section SearchGroup the steps into a stage

Open the site: 5: MeTask, satisfaction 1–5, then who did it

Enter card: 2: Me, BankSeveral actors, comma separated

Git graph

gitGraphHeader line

commitA commit on the current branch

commit id: "first"Commit with a label

commit tag: "v1.0"Commit carrying a tag

commit type: HIGHLIGHTAlso REVERSE and NORMAL

branch devCreate a branch (and switch to it)

checkout mainSwitch branches

merge devMerge a branch into the current one

cherry-pick id: "b"Copy one commit across

Class — members

classDiagramHeader line

class Account { … }Declare a class and its members

+publicPublic member

-privatePrivate member

#protectedProtected member

~packagePackage / internal member

+total() MoneyMethod with a return type

<<interface>>Annotation inside the class body

Class — relationships

A <|-- BInheritance — B is an A

A *-- BComposition — B cannot outlive A

A o-- BAggregation — A holds B, loosely

A --> BAssociation

A ..> BDependency — A uses B

A ..|> BRealisation — A implements B

A "1" --> "*" B : labelCardinality on each end, plus a label

note for A "text"Attach a note to a class

direction LRLay the diagram out left to right

classDef warn fill:#feeStyle classes (apply with A:::warn)

Entity relationship

erDiagramHeader line

A ||--o{ B : placesRelationship, read left to right

||Exactly one

o|Zero or one

}|One or more

o{Zero or more

A ||..o{ B : xDashed — a non-identifying relationship

USER { int id PK }Attribute block; also FK and UK

string email "unique"Attribute with a comment

p[Person] { … }Entity with a display alias

Block

block-betaHeader line

columns 3How many blocks fit per row

a["Label"]Block with a label

a["Wide"]:3Block spanning three columns

spaceLeave one cell empty (space:2 for more)

block:group … endNest blocks inside a group

a --> bArrow between blocks

a -- "then" --> bLabelled arrow

a(("Circle"))Shapes work as in flowcharts

Architecture

architecture-betaHeader line

group api(cloud)[API]A boundary with an icon and a label

service db(database)[DB]A component

service s(server)[S] in apiPlace a component inside a group

a:R -- L:bEdge from a's right to b's left

a:R --> L:bSame, with an arrowhead

junction jA joint where edges meet

(cloud)Icon names: cloud, database, disk, server, internet

C4 context

C4ContextHeader (also C4Container, C4Component)

Person(id, "Name", "desc")A human actor

System(id, "Name", "desc")A system you own

System_Ext(id, …)A system someone else owns

SystemDb(id, …)A datastore

Container(id, "Name", "Tech")A deployable unit (C4Container)

Enterprise_Boundary(id, …)Draw a boundary around others — { } holds them

Rel(a, b, "uses")A relationship (BiRel for both ways)

Packet

packet-betaHeader line

title A frameOptional title

0-15: "Source port"A field spanning bits 0 to 15

16: "Flag"A single-bit field

0-7 then 8-15Ranges must run in order, with no gaps

Gantt

ganttHeader line

dateFormat YYYY-MM-DDHow the dates below are written

axisFormat %d %bHow the axis prints them

section BuildGroup tasks into a band

Spec :a1, 2026-01-05, 5dTask — id, start, duration

QA :after a1, 3dStart when another task finishes

:done,Also active, and crit, before the id

:milestone, m1, …, 0dA zero-length marker

excludes weekendsSkip non-working days

todayMarker offHide the "today" line

Timeline

timelineHeader line

title HistoryOptional title

2020 : StartedA period and what happened in it

2020 : One : TwoSeveral events in the same period

section EarlyGroup periods into an era

Kanban

kanbanHeader line

TodoA column — anything at the outer indent

[Write the spec]A card, indented under its column

@{ assigned: 'sam' }Metadata after the card

@{ priority: 'High' }Very High / High / Low / Very Low

@{ ticket: 'AB-1' }Show a ticket reference on the card

Requirement

requirementDiagramHeader line

requirement name { … }A requirement block

id: 1Required inside the block, with text:

risk: highlow / medium / high

verifymethod: testanalysis / inspection / test / demonstration

functionalRequirementAlso interface, performance, physical, designConstraint

element name { type: app }Something that implements a requirement

e - satisfies -> rAlso traces, contains, derives, verifies, refines, copies

Quadrant

quadrantChartHeader line

title Effort vs impactOptional title

x-axis Low --> HighLabels for each end of the x axis

y-axis Small --> BigSame for the y axis

quadrant-1 Do nextTop right; 2 top left, 3 bottom left, 4 bottom right

Thing: [0.2, 0.8]A point — both values run 0 to 1

Mind map

mindmapHeader line

rootIndentation alone makes the hierarchy

root((Middle))Circle — the usual root shape

id[Square]Square node

id(Rounded)Rounded node

id))Bang((Bang

id)Cloud(Cloud

id{{Hexagon}}Hexagon

Pie chart

pieHeader line

pie showDataPrint each value next to its label

title Traffic by sourceOptional title

"Direct" : 271A slice — the label must be quoted

XY chart

xychart-betaHeader line

title "Monthly signups"Optional title — quoted

x-axis [jan, feb, mar]Categories along the bottom

x-axis "t" 0 --> 5Or a numeric range

y-axis "Signups" 0 --> 900Label and range

bar [220, 310, 285]A bar series

line [220, 310, 285]A line series — both can share a chart

Sankey

sankey-betaHeader line

Visits,Signups,4200Plain CSV: source, target, amount

"A, inc",B,10Quote a label that contains a comma

Radar

radar-betaHeader line

title Team skillsOptional title

axis a["Code"], b["Ops"]The spokes; repeat the line for more

curve x["Now"]{80, 55}One value per axis, in order

max 100Outer edge of the scale (min for the centre)

graticule polygonGrid shape — polygon or circle

ticks 4How many rings to draw

Treemap

treemap-betaHeader line

"Root"A branch — quoted, indentation makes the nesting

"Leaf": 10A leaf and its size

"A": 5:::bigApply a style class to one node

classDef big fill:#feeDefine that style class

Every diagram

%% a noteComment line — never rendered

---
title: My diagram
---

Front matter above the header line

config:
  look: handDrawn

In front matter — a sketched look

%%{init: {"theme": "forest"}}%%Override the theme for this diagram only

Examples — click to load

Decision flow

Branching with {…} diamonds, labelled arrows, and a loop back to an earlier step.

Node shapes

Every common shape in one left-to-right chain — a visual cheat sheet.

Architecture with subgraphs

Groups nodes with subgraph … end and colours the storage nodes with classDef.

Claim handover

One subgraph per role becomes one lane; links cross lanes to show each handover. Everything else is flowchart syntax — shapes, labelled branches and classDef all work.

Activation bars with +/-, dashed replies, an alt/else branch and a note.

Worker polling loop

loop, parallel par/and, a break path, async -) sends and a lost -x message.

Publishing workflow

[*] marks the start and end states; text after : labels the transition.

Composite states & a choice

A nested machine inside state … { }, a <<choice>> branch point and a note.

Order schema

Crow-foot markers give the cardinality: || exactly one, o{ zero or more, |{ one or more. Keys are PK, FK, UK.

Interface & implementations

An <<interface>>, realisation with <|.., aggregation o--, a dependency ..> and a note.

Support journey

Each task scores satisfaction 1–5; the actors after the score share the step.

Release branch & cherry-pick

A hotfix merged to main and cherry-picked onto a release branch, then tagged.

Layered system

A fixed columns grid with spans, a nested block: group, space and a labelled arrow.

Two-zone deployment

Services placed in groups, with edges anchored to sides — L, R, T, B.

System context

People, an owned system and an external one inside an Enterprise_Boundary, joined by Rel and BiRel.

UDP header

Bit ranges laid out in order with no gaps — that ordering is what the parser requires.

Migration plan

Chained after dependencies, done/active/crit states, a milestone and excludes weekends.

Era timeline

Periods grouped into section eras; extra : segments add more events to the same year.

Sprint board

Cards carry @{ } metadata — assignee, ticket and priority all render on the card.

Requirements & traceability

Two requirement kinds, an element that implements them, and satisfies/verifies/derives links.

Prioritisation grid

Both point values run 0 to 1; quadrant-1 is the top right, then anticlockwise.

Release checklist

Indentation alone builds the tree; the shape brackets change how a branch is drawn.

Bundle breakdown

showData prints the raw values; slices are shares of the total, whatever it adds up to.

Bars and a line

Two series on one chart — both read the same y-axis range, so keep their scales comparable.

Funnel flow

Plain CSV — source,target,amount. Nodes appear from the names; nothing is declared.

Before and after

Two curves over the same axes — values are listed in axis order, so both must have the same count.

What is taking the space

Indentation nests the branches; only leaves carry a value, and the branches sum them.