Diagram examples

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

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

Build-time proof: rendered from the same source and options 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 --> [*]

Build-time proof: rendered from the same source and options the editor loads.

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

Build-time proof: rendered from the same source and options the editor loads.

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

Build-time proof: rendered from the same source and options the editor loads.

Class

Classes with members, inheritance, and composition.

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 {
    <<abstract>>
    +render(source) string
  }
  class SVGRenderer {
    +render(source) string
  }
  class RenderPipeline {
    +run(source) string
  }
  Renderer <|-- SVGRenderer
  RenderPipeline *-- SVGRenderer : owns

Build-time proof: rendered from the same source and options the editor loads.

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

Build-time proof: rendered from the same source and options 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

Build-time proof: rendered from the same source and options the editor loads.

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

Build-time proof: rendered from the same source and options 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]

Build-time proof: rendered from the same source and options 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

Build-time proof: rendered from the same source and options 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]
  Palette polish: [0.35, 0.24]

Build-time proof: rendered from the same source and options 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

Build-time proof: rendered from the same source and options the editor loads.

Mindmap

A centered, bilateral hierarchy with shapes, Markdown, Unicode, accessibility, and deep quality branches.

Prompt Add an Evidence child under Research and verify the hierarchy before returning source.

Trace asMindmap · mutate(add_node) · verify

Open in editor

mindmap
  root((Agent-native release))
    discovery[Discovery]
      ::icon(fa fa-book)
      :::urgent large
      evidence["`**Evidence** across
interviews, benchmarks, and Unicode naïve café`"]
      constraints{{Constraints}}
        Security
        Determinism
    delivery(Delivery)
      beta))Beta signal((
      launch)Launch cloud(
      quality[Quality gates]
        Parser round-trip
        SVG identity
        Terminal width
    Ecosystem
      Mermaid parity
      Terminal tools

Build-time proof: rendered from the same source and options the editor loads.

GitGraph

Ordered branches, commit types, tags, a semantic merge, and a merge-parent backport.

Prompt Add a release branch and merge it back with a tagged commit.

Trace asGitGraph · mutate(create_branch/merge_branch) · verify

Open in editor

---
title: Release train with backport
config:
  gitGraph:
    mainBranchName: main
    mainBranchOrder: 0
    showBranches: true
    showCommitLabel: true
    rotateCommitLabel: true
---
gitGraph LR:
  accTitle: Release history with feature merge and backport
  accDescr: Develop and release branches diverge, main merges develop, and release cherry-picks the merge
  commit id:"ROOT" tag:"v1.0.0" msg:"Foundation"
  branch develop order:2
  commit id:"API" type:HIGHLIGHT tag:"beta" msg:"Build API"
  branch release order:3
  commit id:"RC" type:REVERSE tag:"rc.1" msg:"Cut release candidate"
  checkout develop
  commit id:"UI" msg:"Finish interface"
  checkout main
  commit id:"HOTFIX" type:REVERSE msg:"Patch production"
  merge develop id:"MERGE" tag:"v2.0.0" type:HIGHLIGHT
  checkout release
  cherry-pick id:"MERGE" parent:"UI" tag:"backport"
  commit id:"PATCH" msg:"Verify release"

Build-time proof: rendered from the same source and options the editor loads.

Radar

Radar chart

Multivariate profiles compared across shared axes — the silhouette is the message.

Prompt Add a Reliability axis (filling existing curves) and a target curve, then verify.

Trace asRadar · mutate(add_axis/add_curve) · verify

Open in editor

radar-beta
  title Model comparison
  axis speed["Speed"], accuracy["Accuracy"], cost["Cost"]
  axis latency["Latency"], context["Context"], safety["Safety"]
  curve a["Model A"]{4, 5, 3, 4, 4, 5}
  curve b["Model B"]{5, 3, 4, 3, 5, 3}
  graticule polygon
  max 5

Build-time proof: rendered from the same source and options the editor loads.

This example moved to the complete Style × Palette page.

This example moved to the complete corpus page.

Style × Palette combinations

The complete rendered matrix is available on its standalone page and can also load here on request.

Examples are not loaded yet.

Open complete Style × Palette page

Rich shared example gallery

The full project corpus remains searchable and linkable on a stable standalone page.

Examples are not loaded yet.

Open complete corpus page