{"slug": "agentic-mermaid", "title": "Agentic Mermaid", "summary": "Agentic Mermaid, a new open-source tool, combines a Mermaid parser, deterministic renderer, style system, and verification loop to let AI agents create, style, and export diagrams while keeping the Mermaid source reviewable. It offers built-in styles, palette themes, and multiple output formats (SVG, PNG, ASCII, Unicode, layout JSON), with a library, CLI, and MCP server for agent-native control. The tool includes verifyMermaid for structural and geometric warnings, and supports one-request, three-channel operation via library, CLI, or MCP.", "body_md": "Agentic Mermaid combines a Mermaid parser, deterministic renderer, style system, and verification loop. Your agent can create a diagram, apply a style and brand palette, export the artifact you need, and keep the Mermaid source reviewable for the next edit.\n\nBeautiful renders\n\nBuilt-in styles cover docs, decks, reports, terminals, sketches, and blueprints.\n\nPalette themes and custom JSON styles encode brand colors, typography, strokes, fills, and page backdrops.\n\nSVG and PNG serve pages and decks; ASCII, Unicode, and layout JSON serve review tools and agents.\n\nAgent-native control\n\nTyped parse and mutate helpers make Mermaid source the durable interface.\n\nverifyMermaid reports structural, geometric, and lint warnings with stable codes.\n\nstart.md, CLI, library, and MCP surfaces give agents one tested operating path.\n\nThe result is source you can review, renders you can ship, and an edit loop your agent can repeat.\n\nOne request, three channels\n\nAsk the agent to make the diagram, set style and palette, verify the source, and return the render path through whichever channel it already has.\n\nLibrary\n\n``` js\nimport { parseRegisteredMermaid, asFlowchart, mutate, verifyMermaid, serializeMermaid }\n  from 'agentic-mermaid/agent'\n\nconst flow = asFlowchart(parseRegisteredMermaid(source).value)\nconst r = mutate(flow, { kind: 'add_edge', from: 'API', to: 'Cache' })\nif (!verifyMermaid(r.value).ok) throw new Error('edit left structural warnings')\nconst next = serializeMermaid(r.value)\n```\n\nCLI\n\n``` bash\n$ am mutate diagram.mmd --op '{\"kind\":\"add_edge\",\"from\":\"API\",\"to\":\"Cache\"}'\n# applies the op, verifies, emits source\n$ am verify diagram.mmd --json            # tiered warnings, stable codes\n$ am render diagram.mmd --format unicode  # same layout, in the terminal\n```\n\nMCP\n\n```\n// MCP Code Mode: the hosted MCP at https://agentic-mermaid.dev/mcp, or a self-hosted server.\n// The whole loop runs in one execute(code) call; the SDK is bound as `mermaid`.\nexecute(`\n  const source = 'flowchart LR\\n  UI[Web app] --> API\\n  API --> DB[(Postgres)]'\n  const flow = mermaid.asFlowchart(mermaid.parseRegisteredMermaid(source).value)\n  const r = mermaid.mutate(flow, { kind: 'add_edge', from: 'API', to: 'Cache' })\n  const v = mermaid.verifyMermaid(r.value)\n  return v.ok ? { source: mermaid.serializeMermaid(r.value) }\n              : { error: 'verify failed', warnings: v.warnings }\n`)\n```\n\nIn the cloned repo, am is bun run bin/am.ts; MCP wiring is in Getting started.\n\nInstall locally in Getting started: clone, build, and wire the stdio MCP in two minutes.\n\nStyle × palette\n\nOne source, three styles\n\nRender SVG for docs, PNG for decks, ASCII or Unicode for review, and layout JSON when tooling needs coordinates. To change visual treatment, pass a style stack in render options; examples include watercolor,paper and ops-schematic,nord-light. Seed changes only sketch noise; node positions and edge routes stay fixed.\n\nEach card uses the same Mermaid source with different render options. Agents pass style, palette, and seed in the render call instead of rewriting labels or edges for visual changes.\n\nSketch note\n\nFor whiteboards, docs drafts, and agent working notes.", "url": "https://wpnews.pro/news/agentic-mermaid", "canonical_source": "https://agentic-mermaid.dev/", "published_at": "2026-08-02 19:20:48+00:00", "updated_at": "2026-08-02 19:52:52.721518+00:00", "lang": "en", "topics": ["developer-tools", "ai-agents", "ai-tools"], "entities": ["Agentic Mermaid", "Mermaid"], "alternates": {"html": "https://wpnews.pro/news/agentic-mermaid", "markdown": "https://wpnews.pro/news/agentic-mermaid.md", "text": "https://wpnews.pro/news/agentic-mermaid.txt", "jsonld": "https://wpnews.pro/news/agentic-mermaid.jsonld"}}