Agentic Mermaid
Menu

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

Review focus. Decision flow with labeled branches. Compare deterministic local rendering against the browser/runtime render.

Mermaid

flowchart TD
  A[Start] --> B{Decision?}
  B -->|Yes| C[Do the thing]
  B -->|No| D[Skip it]
  C --> E[End]
  D --> E

Beautiful Mermaid

Beautiful Mermaid FlowchartFlowchart rendered by Beautiful Mermaid. Yes No Start Decision? Do the thing Skip it End

Agentic Mermaid

Agentic Mermaid FlowchartFlowchart rendered by Agentic Mermaid. Yes No Start Decision? Do the thing Skip it End

State

Review focus. Lifecycle using Mermaid stateDiagram-v2 syntax. Compare deterministic local rendering against the browser/runtime render.

Mermaid

stateDiagram-v2
  [*] --> Idle
  Idle --> Processing: start
  Processing --> Complete: done
  Processing --> Failed: error
  Failed --> Idle: retry
  Complete --> [*]

Beautiful Mermaid

Beautiful Mermaid StateState rendered by Beautiful Mermaid. start done error retry Idle Processing Complete Failed

Agentic Mermaid

Agentic Mermaid StateState rendered by Agentic Mermaid. start done error retry Idle Processing Complete Failed

Sequence

Review focus. Request/response messages between participants. Compare deterministic local rendering against the browser/runtime render.

Mermaid

sequenceDiagram
  participant User
  participant App
  participant API
  User->>App: Click export
  App->>API: Render SVG
  API-->>App: SVG string
  App-->>User: Download

Beautiful Mermaid

Beautiful Mermaid SequenceSequence rendered by Beautiful Mermaid. Click export Render SVG SVG string Download User App API

Agentic Mermaid

Agentic Mermaid SequenceSequence rendered by Agentic Mermaid. Click export Render SVG SVG string Download User App API

Timeline

Review focus. Chronological milestones with sections. Compare deterministic local rendering against the browser/runtime render.

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

Mermaid

timeline
  title Product roadmap
  section Foundation
  2024 Q1 : Prototype
          : Parser coverage
  section Launch
  2024 Q2 : Public editor
          : SVG export

Agentic Mermaid

Agentic Mermaid TimelineTimeline rendered by Agentic Mermaid. Product roadmap Foundation Launch 2024 Q1 Prototype Parser coverage 2024 Q2 Public editor SVG export Product roadmap

Class

Review focus. Classes with members, inheritance, and composition. Compare deterministic local rendering against the browser/runtime render.

Mermaid

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

Beautiful Mermaid

Beautiful Mermaid ClassClass rendered by Beautiful Mermaid. <<abstract>> Renderer + render(source): string SVGRenderer + render(source): string RenderPipeline + run(source): string owns

Agentic Mermaid

Agentic Mermaid ClassClass rendered by Agentic Mermaid. <<abstract>> Renderer + render(source): string SVGRenderer + render(source): string RenderPipeline + run(source): string owns

ER

Review focus. Entities, attributes, keys, and cardinality markers. Compare deterministic local rendering against the browser/runtime render.

Mermaid

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

Beautiful Mermaid

Beautiful Mermaid ERER rendered by Beautiful Mermaid. CUSTOMER PK string id string email ORDER PK string id date created LINE_ITEM PK string id int quantity places contains

Agentic Mermaid

Agentic Mermaid ERER rendered by Agentic Mermaid. CUSTOMER PK string id string email ORDER PK string id date created LINE_ITEM PK string id int quantity places contains

Journey

Review focus. Scored user tasks grouped by section. Compare deterministic local rendering against the browser/runtime render.

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

Mermaid

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

Agentic Mermaid

Agentic Mermaid JourneyJourney rendered by Agentic Mermaid. Editor adoption 5 4 3 2 1 Actors User Developer Try Share Open editor Load example Copy URL Export SVG Editor adoption

Architecture

Review focus. Services, groups, icons, and routed connections. Compare deterministic local rendering against the browser/runtime render.

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

Mermaid

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

Agentic Mermaid

Agentic Mermaid ArchitectureArchitecture rendered by Agentic Mermaid. Application Data Web App API Postgres

XY Chart

Review focus. Bar and line series using xychart syntax. Compare deterministic local rendering against the browser/runtime render.

Mermaid

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]

Beautiful Mermaid

Beautiful Mermaid XY ChartXY Chart rendered by Beautiful Mermaid. Mon Tue Wed Thu Fri 0 20 40 60 80 100 Renders Weekly renders Bar 1 Line 1

Agentic Mermaid

Agentic Mermaid XY ChartXY Chart rendered by Agentic Mermaid. Mon Tue Wed Thu Fri 0 10 20 30 40 50 60 70 80 90 100 Renders Weekly renders Bar 1 Line 1

Pie

Review focus. Proportional slices with values shown in the legend. Compare deterministic local rendering against the browser/runtime render.

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

Mermaid

pie showData
  title Export requests by format
  "SVG" : 42
  "PNG" : 28
  "ASCII" : 18
  "Unicode" : 12

Agentic Mermaid

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

Quadrant

Review focus. Two-axis priority map with labeled regions and points. Compare deterministic local rendering against the browser/runtime render.

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

Mermaid

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]

Agentic Mermaid

Agentic Mermaid QuadrantQuadrant rendered by Agentic Mermaid. Feature priorities Big bets Plan carefully Defer Quick wins SVG export MCP setup Palette polish Low impact High impact Low effort High effort Feature priorities

Gantt

Review focus. Sections, dependencies, status tags, and a milestone. Compare deterministic local rendering against the browser/runtime render.

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
    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

Agentic Mermaid

Agentic Mermaid GanttGantt rendered by Agentic Mermaid. 01-14 01-21 Build Ship Completed task Active task Future task Crit review Release Release train

Mindmap

Review focus. A centered, bilateral hierarchy with shapes, Markdown, Unicode, accessibility, and deep quality branches. Compare deterministic local rendering against the browser/runtime render.

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

Mermaid

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

Agentic Mermaid

Agentic Mermaid MindmapMindmap rendered by Agentic Mermaid. Agent-native release Agent-native release Discovery Evidence acrossinterviews, benchmarks, andUnicode naïve café Constraints Security Determinism Delivery Beta signal Launch cloud Quality gates Parser round-trip SVG identity Terminal width Ecosystem Mermaid parity Terminal tools

GitGraph

Review focus. Ordered branches, commit types, tags, a semantic merge, and a merge-parent backport. Compare deterministic local rendering against the browser/runtime render.

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

Mermaid

---
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"

Agentic Mermaid

Agentic Mermaid GitGraphGitGraph rendered by Agentic Mermaid. Release history with feature merge and backport Develop and release branches diverge, main merges develop, and release cherry-picks the merge Release train with backport main develop release Foundation v1.0.0 Build API beta Cut release candidate rc.1 Finish interface Patch production merged branch develop into main v2.0.0 cherry-picked merged branch develop into main into release backport Verify release

Radar

Review focus. Multivariate profiles compared across shared axes — the silhouette is the message. Compare deterministic local rendering against the browser/runtime render.

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

Mermaid

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

Agentic Mermaid

Agentic Mermaid RadarRadar rendered by Agentic Mermaid. Model comparison Speed Accuracy Cost Latency Context Safety Model A Model B Model comparison

Style and palette support

The render rows above compare one source family by family. This section uses one small source and shows where each renderer expects appearance controls to live.

Mermaid

Appearance belongs to the host runtime or page CSS. The diagram source is the same, but the styling contract is outside the Mermaid text.

mermaid.initialize({
  theme: 'base',
  themeVariables: {
    primaryColor: '#f8faf8',
    primaryTextColor: '#16382b'
  }
})
flowchart LR
  Draft[Draft source] --> Verify{Verify}
  Verify -->|ok| Publish[Publish]
  Verify -->|warnings| Revise[Revise]
  Revise --> Verify

Beautiful Mermaid

Appearance is render-call data for supported families: colors, fonts, and CSS-variable SVG output, without an edit/verify loop.

renderMermaidSVG(source, {
  bg: '#F8FAF8',
  fg: '#16382B',
  accent: '#1A7351'
})
Beautiful Mermaid Style palette demoStyle palette demo rendered by Beautiful Mermaid. ok warnings Draft source Verify Publish Revise

Agentic Mermaid

Appearance is a style stack passed after source verification. Styles can change stroke character and typography; palettes change color.

renderMermaidSVG(source, {
  style: [
    'watercolor',
    'paper'
  ],
  seed: 4
})
Agentic Mermaid Style palette demoStyle palette demo rendered by Agentic Mermaid. ok warnings Draft source Verify Publish Revise
ToolWhere controls liveWhat changes visuallyAgent handoff
MermaidHost-owned runtime configThe page or CLI wrapper owns colors and CSS; the Mermaid source stays structural, but the style contract lives beside the renderer.Source plus host config such as mermaid.initialize({ themeVariables }).
Beautiful MermaidRender-call palette optionsA synchronous browserless renderer applies colors, fonts, and CSS variables for supported families; it is still render-only.Source plus render options; no typed edit/verify sequence is part of the handoff.
Agentic MermaidComposable style stackThe same render call can stack renderer treatment, palette, custom JSON roles, and seed after the agent verifies source.Typed edit → verify → render with style: ['watercolor', 'paper'], seed: 4.

Summary: Mermaid leaves appearance with the host renderer, Beautiful Mermaid accepts render-call palettes for supported families, and Agentic Mermaid keeps the safe sequence together: edit typed source, verify it, then pass style and palette render options.

Comparison