Agentic MermaidAboutExamplesComparisonsDocsOpen editor

Examples

Proof that each editor source parses, renders, and carries an agent task you can replay.

Supported diagrams

One proof per supported family: the exact editor source, an agent task, the trace before return, and a build-time render from that same source.

Flowchart

Flowchart

Decision flow with labeled branches.

Prompt Add a labeled failure branch and verify that every decision exit is named.

Trace asFlowchart · mutate(add_edge/set_label) · verify

Open in editor 
flowchart TD
  A[Start] --> B{Decision?}
  B -->|Yes| C[Do the thing]
  B -->|No| D[Skip it]
  C --> E[End]
  D --> E
Flowchart diagramBuild-time render of the Flowchart example loaded by the editor.YesNoStartDecision?Do the thingSkip itEnd
Build-time proof: rendered from the same source the editor loads.

State

State diagram

Lifecycle using Mermaid stateDiagram-v2 syntax.

Prompt Add a retry transition from Failed back to Idle, then verify before returning source.

Trace asState · mutate(add_transition) · verify

Open in editor 
stateDiagram-v2
  [*] --> Idle
  Idle --> Processing: start
  Processing --> Complete: done
  Processing --> Failed: error
  Failed --> Idle: retry
  Complete --> [*]
State diagram diagramBuild-time render of the State example loaded by the editor.startdoneerrorretryIdleProcessingCompleteFailed
Build-time proof: rendered from the same source the editor loads.

Architecture

Architecture

Services, groups, icons, and routed connections.

Prompt Insert a cache service between the app and database and verify boundaries.

Trace asArchitecture · mutate(add_service/add_edge) · verify

Open in editor 
architecture-beta
  group app(cloud)[Application]
  group data(database)[Data]
  service web(server)[Web App] in app
  service api(server)[API] in app
  service db(database)[Postgres] in data
  web:R --> L:api
  api:R --> L:db
Architecture diagramBuild-time render of the Architecture example loaded by the editor.ApplicationDataWeb AppAPIPostgres
Build-time proof: rendered from the same source the editor loads.

Sequence

Sequence

Request/response messages between participants.

Prompt Insert the verification call before export and keep participant order stable.

Trace asSequence · mutate(add_message) · verify

Open in editor 
sequenceDiagram
  participant User
  participant App
  participant API
  User->>App: Click export
  App->>API: Render SVG
  API-->>App: SVG string
  App-->>User: Download
Sequence diagramBuild-time render of the Sequence example loaded by the editor.Click exportRender SVGSVG stringDownloadUserAppAPI
Build-time proof: rendered from the same source the editor loads.

Class

Class

Classes with members and relationships.

Prompt Add a repository class and connect it to the service with a typed relationship.

Trace asClass · mutate(add_class/add_relation) · verify

Open in editor 
classDiagram
  class Renderer {
    +renderSVG(source) string
    +renderASCII(source) string
  }
  class Theme {
    +bg string
    +fg string
  }
  Renderer --> Theme : uses
Class diagramBuild-time render of the Class example loaded by the editor.Renderer+ renderSVG(source): string+ renderASCII(source): stringTheme+ string: bg+ string: fguses
Build-time proof: rendered from the same source the editor loads.

ER

ER diagram

Entities, attributes, keys, and cardinality markers.

Prompt Add an order line-item relationship and verify cardinalities before serialize.

Trace asEr · mutate(add_relation) · verify

Open in editor 
erDiagram
  CUSTOMER {
    string id PK
    string email
  }
  ORDER {
    string id PK
    date created
  }
  LINE_ITEM {
    string id PK
    int quantity
  }
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
ER diagram diagramBuild-time render of the ER example loaded by the editor.CUSTOMERPKstringidstringemailORDERPKstringiddatecreatedLINE_ITEMPKstringidintquantityplacescontains
Build-time proof: rendered from the same source the editor loads.

Timeline

Timeline

Chronological milestones with sections.

Prompt Add a Review period with one approval event without rewriting other periods.

Trace asTimeline · mutate(add_period) · verify

Open in editor 
timeline
  title Product roadmap
  section Foundation
  2024 Q1 : Prototype
          : Parser coverage
  section Launch
  2024 Q2 : Public editor
          : SVG export
Timeline diagramBuild-time render of the Timeline example loaded by the editor.Product roadmapFoundationLaunch2024 Q1PrototypeParser coverage2024 Q2Public editorSVG exportProduct roadmap
Build-time proof: rendered from the same source the editor loads.

Journey

User journey

Scored user tasks grouped by section.

Prompt Add an agent verification task and preserve existing scores.

Trace asJourney · mutate(add_task) · verify

Open in editor 
journey
  title Editor adoption
  section Try
    Open editor: 5: User
    Load example: 4: User, Developer
  section Share
    Copy URL: 5: User
    Export SVG: 4: Developer
User journey diagramBuild-time render of the Journey example loaded by the editor.Editor adoptionTryShareOpen editorUserLoad exampleUserDeveloperCopy URLUserExport SVGDeveloperEditor adoption
Build-time proof: rendered from the same source the editor loads.

XY Chart

XY chart

Bar and line series using xychart syntax.

Prompt Add a forecast series and verify the axes still render cleanly.

Trace asXyChart · mutate(add_series) · verify

Open in editor 
xychart
  title "Weekly renders"
  x-axis [Mon, Tue, Wed, Thu, Fri]
  y-axis "Renders" 0 --> 100
  bar [25, 42, 58, 74, 88]
  line [18, 35, 52, 70, 95]
XY chart diagramBuild-time render of the XY Chart example loaded by the editor.MonTueWedThuFri0102030405060708090100RendersWeekly rendersMon: 2525Tue: 4242Wed: 5858Thu: 7474Fri: 8888Mon: 1818Tue: 3535Wed: 5252Thu: 7070Fri: 9595
Build-time proof: rendered from the same source the editor loads.

Pie

Pie chart

Proportional slices with values shown in the legend.

Prompt Add a Documentation slice and keep labels readable.

Trace asPie · mutate(add_slice) · verify

Open in editor 
pie showData
  title Export requests by format
  "SVG" : 42
  "PNG" : 28
  "ASCII" : 18
  "Unicode" : 12
Pie chart diagramBuild-time render of the Pie example loaded by the editor.SVG [42] (42.0%)PNG [28] (28.0%)ASCII [18] (18.0%)Unicode [12] (12.0%)Export requests by format
Build-time proof: rendered from the same source the editor loads.

Quadrant

Quadrant chart

Two-axis priority map with labeled regions and points.

Prompt Move one point into the high-impact quadrant and verify coordinates.

Trace asQuadrant · mutate(move_point) · verify

Open in editor 
quadrantChart
  title Feature priorities
  x-axis Low impact --> High impact
  y-axis Low effort --> High effort
  quadrant-1 Plan carefully
  quadrant-2 Big bets
  quadrant-3 Defer
  quadrant-4 Quick wins
  SVG export: [0.78, 0.28]
  MCP setup: [0.62, 0.72]
  Theme polish: [0.35, 0.24]
Quadrant chart diagramBuild-time render of the Quadrant example loaded by the editor.Big betsPlan carefullyDeferQuick winsSVG exportMCP setupTheme polishLow impactHigh impactLow effortHigh effortFeature priorities
Build-time proof: rendered from the same source the editor loads.

Gantt

Gantt chart

Sections, dependencies, status tags, and a milestone.

Prompt Add a verification milestone before release and resolve the schedule.

Trace asGantt · mutate(add_task) · verify

Open in editor 
gantt
  title Release train
  dateFormat YYYY-MM-DD
  excludes weekends
  section Build
    Completed task :done, des1, 2024-01-08, 2024-01-10
    Active task    :active, des2, 2024-01-11, 3d
    Future task    :des3, after des2, 5d
  section Ship
    Crit review    :crit, rev1, after des3, 2d
    Release        :milestone, m1, after rev1, 0d
Gantt chart diagramBuild-time render of the Gantt example loaded by the editor.01-1401-21BuildShipCompleted taskActive taskFuture taskCrit reviewReleaseRelease train
Build-time proof: rendered from the same source the editor loads.

Role style presets

These load role-style presets in the editor. This page renders them with one fixed review theme so the proof stays visually comparable.

Flowchart

Styled flowchart

Flowchart using semantic node, edge, text, and group roles.

Open in editor 
flowchart TD
  subgraph product [Product Loop]
    A[Capture request] --> B{Ready?}
    B -->|yes| C[Ship]
    B -.->|needs work| D[Refine]
  end
Styled flowchart diagramBuild-time render of the Flowchart example loaded by the editor.Product Loopyesneeds workCapture requestReady?ShipRefine
Build-time proof: rendered from the same source the editor loads.

State

Styled state

State diagram consuming the same flowchart/state role mapping.

Open in editor 
stateDiagram-v2
  [*] --> Draft
  Draft --> Review: submit
  Review --> Draft: request changes
  Review --> Published: approve
  Published --> [*]
Styled state diagramBuild-time render of the State example loaded by the editor.submitrequest changesapproveDraftReviewPublished
Build-time proof: rendered from the same source the editor loads.

Architecture

Styled architecture

Architecture services, groups, and connectors styled semantically.

Open in editor 
architecture-beta
  group edge(cloud)[Edge Layer]
  group core(server)[Core Services]
  service web(server)[Web App] in edge
  service api(server)[API] in core
  service db(database)[Postgres] in core
  web:R --> L:api
  api:R --> L:db
Styled architecture diagramBuild-time render of the Architecture example loaded by the editor.Edge LayerCore ServicesWeb AppAPIPostgres
Build-time proof: rendered from the same source the editor loads.

Sequence

Styled sequence

Participants use node style; messages use edge style.

Open in editor 
sequenceDiagram
  participant U as User
  participant E as Editor
  participant R as Renderer
  U->>E: Change style role
  E->>R: render(source, options.style)
  R-->>E: SVG
Styled sequence diagramBuild-time render of the Sequence example loaded by the editor.Change style rolerender(source, options.style)SVGUserEditorRenderer
Build-time proof: rendered from the same source the editor loads.

Class

Styled class

Class boxes and relationships through shared style roles.

Open in editor 
classDiagram
  class Renderer {
    +renderSVG(source) string
    +renderASCII(source) string
  }
  class StyleResolver {
    +resolveRenderStyle(options) object
  }
  Renderer --> StyleResolver : uses
Styled class diagramBuild-time render of the Class example loaded by the editor.Renderer+ renderSVG(source): string+ renderASCII(source): stringStyleResolver+ resolveRenderStyle(options): objectuses
Build-time proof: rendered from the same source the editor loads.

ER

Styled ER

ER entities and relationships inherit node/edge roles.

Open in editor 
erDiagram
  USER {
    string id PK
    string email
  }
  DIAGRAM {
    string id PK
    string source
  }
  EXPORT {
    string id PK
    string format
  }
  USER ||--o{ DIAGRAM : creates
  DIAGRAM ||--o{ EXPORT : renders
Styled ER diagramBuild-time render of the ER example loaded by the editor.USERPKstringidstringemailDIAGRAMPKstringidstringsourceEXPORTPKstringidstringformatcreatesrenders
Build-time proof: rendered from the same source the editor loads.

Timeline

Styled timeline

Timeline periods and events styled as semantic cards/groups.

Open in editor 
timeline
  title Fork Roadmap
  section Discover
  2024 Q2 : Audit forks
          : Extract small PRs
  section Ship
  2024 Q3 : Style roles
          : Live editor presets
Styled timeline diagramBuild-time render of the Timeline example loaded by the editor.Fork RoadmapDiscoverShip2024 Q2Audit forksExtract small PRs2024 Q3Style rolesLive editor presetsFork Roadmap
Build-time proof: rendered from the same source the editor loads.

Journey

Styled journey

Journey sections, task cards, and actor chips use role styles.

Open in editor 
journey
  title Editor adoption
  section Try
    Open preset: 5: User
    Tune roles: 4: Designer, Developer
  section Share
    Copy URL: 5: User
    Export SVG: 4: Developer
Styled journey diagramBuild-time render of the Journey example loaded by the editor.Editor adoptionTryShareOpen presetUserTune rolesDesignerDeveloperCopy URLUserExport SVGDeveloperEditor adoption
Build-time proof: rendered from the same source the editor loads.

XY Chart

Styled xychart

XY chart title, axes, grid, and series labels with shared roles.

Open in editor 
xychart
  title "Styled Adoption"
  x-axis [Mon, Tue, Wed, Thu, Fri]
  y-axis "Renders" 0 --> 100
  bar [25, 42, 58, 74, 88]
  line [18, 35, 52, 70, 95]
Styled xychart diagramBuild-time render of the XY Chart example loaded by the editor.MonTueWedThuFri0102030405060708090100RendersStyled AdoptionMon: 2525Tue: 4242Wed: 5858Thu: 7474Fri: 8888Mon: 1818Tue: 3535Wed: 5252Thu: 7070Fri: 9595
Build-time proof: rendered from the same source the editor loads.