Agentic MermaidAboutExamplesComparisonsDocsOpen editor

Comparisons

One source per family, rendered three ways.

Read this page as evidence, not a shootout. Each row keeps the same Mermaid source visible, then shows what a browser Mermaid render, upstream Beautiful Mermaid, and Agentic Mermaid can produce locally.

Flowchart

What to look for. Compare edge routing, label stability, and whether dense fan-out still reads without browser-dependent drift.

Mermaid

flowchart LR
  Start([Start]) --> Parse[Parse]
  Parse --> Decision{Valid?}
  Decision -->|yes| Cache[(Cache)]
  Decision -->|retry| Parse
  Decision -->|no| Error[Return error]
  Cache --> API[API]
  API --> DB[(Database)]
  API --> Queue[[Queue]]
  Queue --> Worker[Worker]
  Worker --> DB
  DB --> Done([Done])

Beautiful Mermaid

Beautiful Mermaid FlowchartFlowchart rendered by Beautiful Mermaid. yes retry no Start Parse Valid? Cache Return error API Database Queue Worker Done

Agentic Mermaid

Agentic Mermaid FlowchartFlowchart rendered by Agentic Mermaid.yesretrynoStartParseValid?CacheReturn errorAPIQueueWorkerDatabaseDone

State

What to look for. Look for nested-state containment and transition labels that remain readable as the lifecycle grows.

Mermaid

stateDiagram-v2
  [*] --> Idle
  Idle --> Running: start
  state Running {
    [*] --> Fetch
    Fetch --> Verify
    Verify --> Fetch: retry
    Verify --> Commit: ok
  }
  Running --> Failed: error
  Failed --> Idle: reset
  Running --> [*]: done

Beautiful Mermaid

Beautiful Mermaid StateState rendered by Beautiful Mermaid. Running start error reset done retry ok Idle Failed Fetch Verify Commit

Agentic Mermaid

Agentic Mermaid StateState rendered by Agentic Mermaid.RunningstarterrorresetdoneretryokIdleFetchVerifyCommitFailed

Sequence

What to look for. Check participant alignment, block labels, and warning paths: this is the common agent-edit audit loop.

Mermaid

sequenceDiagram
  actor User
  participant Agent
  participant CLI
  participant Renderer
  User->>Agent: change diagram
  Agent->>CLI: mutate
  CLI->>Renderer: verify
  alt clean
    Renderer-->>CLI: ok
  else warnings
    Renderer-->>CLI: codes
    CLI-->>Agent: repair
  end
  CLI-->>Agent: source

Beautiful Mermaid

Beautiful Mermaid SequenceSequence rendered by Beautiful Mermaid. alt [clean] [warnings] change diagram mutate verify ok codes repair source User Agent CLI Renderer

Agentic Mermaid

Agentic Mermaid SequenceSequence rendered by Agentic Mermaid.alt [clean][warnings]change diagrammutateverifyokcodesrepairsourceUserAgentCLIRenderer

Class

What to look for. Compare relationship routing and member-box spacing on a compact class model.

Mermaid

classDiagram
  class Diagram {
    +kind
    +source
    +verify()
  }
  class Flowchart {
    +nodes
    +edges
    +mutate()
  }
  class Warning {
    +code
    +tier
  }
  Diagram <|-- Flowchart
  Diagram "1" --> "*" Warning : emits

Beautiful Mermaid

Beautiful Mermaid ClassClass rendered by Beautiful Mermaid. Diagram + kind + source + verify() Flowchart + nodes + edges + mutate() Warning + code + tier emits 1 *

Agentic Mermaid

Agentic Mermaid ClassClass rendered by Agentic Mermaid.Diagram+ kind+ source+ verify()Flowchart+ nodes+ edges+ mutate()Warning+ code+ tieremits1*

ER

What to look for. Inspect cardinality labels and orthogonal routes across a wide schema.

Mermaid

erDiagram
  FAMILY ||--o{ DIAGRAM : accepts
  DIAGRAM ||--o{ WARNING : reports
  DIAGRAM ||--o{ RENDER : produces
  FAMILY {
    string id PK
    string name
  }
  DIAGRAM {
    string id PK
    string source
    string kind
  }
  WARNING {
    string code PK
    string tier
  }
  RENDER {
    string format PK
    string hash
  }

Beautiful Mermaid

Beautiful Mermaid ERER rendered by Beautiful Mermaid. FAMILY PK string id string name DIAGRAM PK string id string source string kind WARNING PK string code string tier RENDER PK string format string hash accepts reports produces

Agentic Mermaid

Agentic Mermaid ERER rendered by Agentic Mermaid.FAMILYPKstringidstringnameDIAGRAMPKstringidstringsourcestringkindWARNINGPKstringcodestringtierRENDERPKstringformatstringhashacceptsreportsproduces

XY Chart

What to look for. Confirm chart scales, bars, and lines are deterministic rather than screenshot-only proof.

Mermaid

xychart
  title "Layout score"
  x-axis [Mermaid, Beautiful, Agentic]
  y-axis "score" 0 --> 100
  bar [68, 74, 91]
  line [64, 77, 94]

Beautiful Mermaid

Beautiful Mermaid XY ChartXY Chart rendered by Beautiful Mermaid. Mermaid Beautiful Agentic 0 20 40 60 80 100 score Layout score Bar 1 Line 1

Agentic Mermaid

Agentic Mermaid XY ChartXY Chart rendered by Agentic Mermaid.MermaidBeautifulAgentic0102030405060708090100scoreLayout score

Timeline

What to look for. Agentic Mermaid renders this supported family locally; Beautiful Mermaid has no panel for it.

Beautiful Mermaid does not render this family; only Mermaid and Agentic Mermaid are shown.

Mermaid

timeline
  title Diagram edit loop
  Source : Mermaid text
  Parse : typed model
  Mutate : one operation
  Verify : structural warnings
  Render : SVG : ASCII : PNG

Agentic Mermaid

Agentic Mermaid TimelineTimeline rendered by Agentic Mermaid.Diagram edit loopSourceMermaid textParsetyped modelMutateone operationVerifystructural warningsRenderSVGASCIIPNGDiagram edit loop

Journey

What to look for. The score grid and actor pills demonstrate a family that agents can parse, mutate, and verify locally.

Beautiful Mermaid does not render this family; only Mermaid and Agentic Mermaid are shown.

Mermaid

journey
  title Agent editing a diagram
  section Guess
    Rewrite whole diagram: 2: Agent
    Ask human to inspect: 1: Reviewer
  section Verify
    Parse source: 5: Agent
    Mutate target: 5: Agent
    Check warnings: 5: Agent

Agentic Mermaid

Agentic Mermaid JourneyJourney rendered by Agentic Mermaid.Agent editing a diagramGuessVerifyRewrite whole diagramAgentAsk human to inspectReviewerParse sourceAgentMutate targetAgentCheck warningsAgentAgent editing a diagram

Architecture

What to look for. Service groups and routed connections show agent-readable architecture output without a hosted renderer.

Beautiful Mermaid does not render this family; only Mermaid and Agentic Mermaid are shown.

Mermaid

architecture-beta
  group client(cloud)[Client]
  group app(cloud)[Application]
  group data(database)[Data]
  service browser(server)[Browser] in client
  service web(server)[Web App] in app
  service api(server)[API] in app
  service queue(server)[Queue] in app
  service db(database)[Postgres] in data
  browser:R --> L:web
  web:R --> L:api
  api:B --> T:queue
  api:R --> L:db
  queue:R --> L:db

Agentic Mermaid

Agentic Mermaid ArchitectureArchitecture rendered by Agentic Mermaid.ClientApplicationDataBrowserWeb AppAPIQueuePostgres

Pie

What to look for. The slice labels and values come from the same local source model as SVG/PNG/text output.

Beautiful Mermaid does not render this family; only Mermaid and Agentic Mermaid are shown.

Mermaid

pie showData
  title Output formats
  "SVG" : 42
  "PNG" : 28
  "ASCII" : 18
  "Unicode" : 12

Agentic Mermaid

Agentic Mermaid PiePie rendered by Agentic Mermaid.SVG [42] (42.0%)PNG [28] (28.0%)ASCII [18] (18.0%)Unicode [12] (12.0%)Output formats

Quadrant

What to look for. Points and axes remain inspectable source, not a static image pasted into docs.

Beautiful Mermaid does not render this family; only Mermaid and Agentic Mermaid are shown.

Mermaid

quadrantChart
  title Edit decisions
  x-axis Low confidence --> High confidence
  y-axis Low reversibility --> High reversibility
  quadrant-1 Commit
  quadrant-2 Review
  quadrant-3 Ask
  quadrant-4 Repair
  typed mutate: [0.82, 0.78]
  source rewrite: [0.24, 0.22]
  verify warnings: [0.71, 0.48]

Agentic Mermaid

Agentic Mermaid QuadrantQuadrant rendered by Agentic Mermaid.ReviewCommitAskRepairtyped mutatesource rewriteverify warningsLow confidenceHigh confidenceLow reversibilityHigh reversibilityEdit decisions

Gantt

What to look for. Schedule resolution is verified locally so bad dependencies can fail before an agent returns source.

Beautiful Mermaid does not render this family; only Mermaid and Agentic Mermaid are shown.

Mermaid

gantt
  title Release train
  dateFormat YYYY-MM-DD
  excludes weekends
  section Build
    Parser        :done, p1, 2024-01-08, 2024-01-10
    Layout pass   :active, l1, 2024-01-11, 3d
    Verify        :v1, after l1, 2d
  section Ship
    Review        :crit, r1, after v1, 2d
    Release       :milestone, m1, after r1, 0d

Agentic Mermaid

Agentic Mermaid GanttGantt rendered by Agentic Mermaid.01-14BuildShipParserLayout passVerifyReviewReleaseRelease train

Comparison