Basic Demos
These demos are adapted from the beautiful-mermaid samples to demonstrate the variety of diagrams supported.
Simple Flowchart
A basic top-down flowchart.
┌─────────┐ │ │ │ Start │ │ │ └────┬────┘ │ │ │ │ ▼ ┌─────────┐ │ │ │ Process │ │ │ └────┬────┘ │ │ │ │ ▼ ┌─────────┐ │ │ │ End │ │ │ └─────────┘
XY Charts
Modern bar and line charts.
r Chart
Product Sales │ │ ████████ 300┤··················································████████·· │ ████████ │ ████████ 250┤··················································████████·· │ ████████ ████████ │ ████████ ████████ 200┤··············████████····························████████·· │ ████████ ████████ ████████ 150┤··████████····████████····████████················████████·· │ ████████ ████████ ████████ ████████ │ ████████ ████████ ████████ ████████ 100┤··████████····████████····████████················████████·· │ ████████ ████████ ████████ ████████ ████████ │ ████████ ████████ ████████ ████████ ████████ 50┤··████████····████████····████████····████████····████████·· │ ████████ ████████ ████████ ████████ ████████ │ ████████ ████████ ████████ ████████ ████████ 0┼··████████····████████····████████····████████····████████·· ┼──────┬───────────┬───────────┬───────────┬───────────┬───── Widgets Gadgets Gizmos Doodads Thingamajigs
xed Line & Bar Chart
Monthly Revenue █ Bar 1 ─ Line 1 10000┤········································································ │ │ ╭─────────█ │ ╭─────╮ │████ ████ 8000┤····································╭─────╮·····│████·╰─────╯████··████· │ │████ ╰─────╯████ ████ ████ ████ │ ╭─────╯████ ████ ████ ████ ████ ████ │ ╭─────╮ │████ ████ ████ ████ ████ ████ ████ 6000┤············╭─────╯████·│·····│████··████··████··████··████··████··████· │ ╭─────╯████ ████ ╰─────╯████ ████ ████ ████ ████ ████ ████ │ │████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ 4000┤·█────╯████··████··████··████··████··████··████··████··████··████··████· │ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ │ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ │ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ 2000┤·████··████··████··████··████··████··████··████··████··████··████··████· │ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ │ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ │ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ ████ 0┼·████··████··████··████··████··████··████··████··████··████··████··████· ┼───┬─────┬─────┬─────┬─────┬─────┬─────┬─────┬─────┬─────┬─────┬─────┬── Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Month
Sequence Interaction
A sequence diagram with actor stick figures and aliases.
┌──────┐ ┌────────┐ ┌──────────┐ │ User │ │ System │ │ Database │ └───┬──┘ └────┬───┘ └─────┬────┘ │ │ │ │ Click button │ │ │─────────────────▶ │ │ │ │ │ │ Query │ │ │────────────▶ │ │ │ │ │ Results │ │ ◀╌╌╌╌╌╌╌╌╌╌╌╌│ │ │ │ │ Display │ │ ◀╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌│ │ │ │ │ ┌───┴──┐ ┌────┴───┐ ┌─────┴────┐ │ User │ │ System │ │ Database │ └──────┘ └────────┘ └──────────┘
Class Structure
A simple class definition with visibility markers.
┌───────────────┐ │ Animal │ ├───────────────┤ │ +name: String │ │ +age: int │ ├───────────────┤ │ +eat: void │ │ +sleep: void │ └───────────────┘
Entity Relationship
A basic relationship between two entities.
┌──────────┐ ┌───────┐ │ CUSTOMER ││───○╟│ ORDER │ └──────────┘places└───────┘
System Architecture
A more complex architecture using subgraphs and different node shapes.
┌─────────────────────────────────────┐ ┌───────────────────┐ ┌────────────────────┐ │ Client Layer │ │ Service Layer │ │ Data Layer │ │ │ │ │ │ │ │ │ │ │ │ │ │ (─────────────) ┌─────────────┐ │ │ ┌───────────────┐ │ │ ╭────────────────╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ Web App ├────►│ API Gateway ├─┼─┼►│ Auth Service ├─┼──┼►│ Auth DB │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ (─────────────) └──────┬──────┘ │ │ └───────────────┘ │ │ ╰────────────────╯ │ │ ▲ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ (─────────────) │ │ │ ┌───────────────┐ │ │ ╭────────────────╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ Mobile App ├────────────┼────────┼─┼►│ User Service ├─┼──┼►│ User DB │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ (─────────────) │ │ │ └───────────────┘ │ │ ╰────────────────╯ │ │ │ │ │ │ │ │ └────────────────────────────┼────────┘ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┌───────────────┐ │ │ ╭────────────────╮ │ │ │ │ │ │ │ │ │ │ └──────────┼►│ Order Service ├─┼──┼►│ Order DB │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └───────┬───────┘ │ │ ╰────────────────╯ │ │ │ │ │ │ └─────────┼─────────┘ │ │ │ │ │ │ │ │ │ │ │ │ │ (────────────────) │ │ │ │ │ │ └────────────┼►│ Message Queue │ │ │ │ │ │ │ (────────────────) │ │ │ └────────────────────┘