Power your agent
คำสั่งของผู้เผยแพร่เอง ไม่ใช่เอนด์พอยต์ของ PlugMCP
Host a copy with our keys and logs.
npx -y [email protected]Claude Code ไม่มีลิงก์ติดตั้งสำหรับคำสั่งแบบโลคัล ให้คัดลอกคำสั่งด้านล่างแล้วรันในเทอร์มินัล
claude mcp add agentic-mermaid -- npx -y agentic-mermaid@0.5.6รันในเทอร์มินัล
{ "mcpServers": { "agentic-mermaid": { "command": "npx", "args": [ "-y", "[email protected]" ] } }}claude_desktop_config.json
URL แบบรีโมตหรือคำสั่งบนเครื่องของคุณ? การติดตั้งสองแบบต่างกันอย่างไร
รันบน PlugMCP
A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.
เปิดจากผู้เผยแพร่
Beautiful diagrams, made with your agent.
Agentic Mermaid is an open-source Mermaid toolkit for people who want AI agents to create diagrams that look finished: SVG and PNG renders, ASCII and Unicode for review, deterministic layout, and Style + Palette controls for brand colors, typography, strokes, fills, and backdrops.
Agentic Mermaid: render, verify, and safely edit Mermaid diagrams as ASCII, PNG, SVG, or structured agent workflows — with composable styles (hand-drawn, excalidraw, watercolor, or your own as JSON).
It is forked from lukilabs/beautiful-mermaid. Published on npm as agentic-mermaid; the GitHub repository is adewale/agentic-mermaid; the canonical live site is agentic-mermaid.dev, a Cloudflare Workers deployment.
Docs: docs index · getting started · agent guide · agent API cookbook · design system · skills · fork differences · vs Mermaid & Beautiful Mermaid · changelog
Use it when you want to describe a diagram in plain language and get back something you can publish without a design cleanup pass.
The agent workflow is the guardrail behind the polish: agents should not guess from pixels, concatenate strings, or regenerate whole diagrams when a structured edit is available.
{ style: ['hand-drawn', 'dracula'] } stacks a look over a palette; discoverable full looks cover sketch, watercolor, blueprint, accessibility, print, operational, physical-media, architecture, and editorial/report use cases. Custom styles are plain JSON records any agent can author (docs/style-authoring.md). seed re-rolls the ink, never the layout.am, agentic-mermaid-mcp, agentic-mermaid, agentic-mermaid/agent, and the browser/workerd-safe agentic-mermaid/agent/core. Audit reports and trusted host-resource helpers remain repository tooling instead of published runtime entry points.npm install agentic-mermaid # or: bun add agentic-mermaid / pnpm add agentic-mermaid
npx --no-install agentic-mermaid --help
npx --no-install agentic-mermaid mcp
For repository development, install from source and run the Bun entrypoints
(Bun 1.4.0 or later; bun upgrade if bun --version is older):
git clone https://github.com/adewale/agentic-mermaid
cd agentic-mermaid
bun install
bun run build
bun run bin/am.ts --help
bun run bin/agentic-mermaid-mcp.ts # MCP stdio server
ESM-only.
agentic-mermaidships ES modules (there is no CommonJS build);require()consumers should use dynamicimport()instead. Requires Node ≥ 22.The
am …examples below name the published bin. After a project-local npm install, invoke it from a shell asnpx --no-install agentic-mermaid …(or from an npm script asam …). From a source checkout, usebun run bin/am.ts …instead.
Use agentic-mermaid/agent when you want one import path for styled renders, output formats, and the structured edit API.
import { renderMermaidSVG } from 'agentic-mermaid/agent'
const svg = renderMermaidSVG(`flowchart TD
Start --> Done`, { security: 'strict' })
import { writeFileSync } from 'node:fs'
import { renderMermaidPNG } from 'agentic-mermaid/agent'
const png = renderMermaidPNG(`flowchart TD
Start --> Done`, {
fitTo: { width: 1200 },
background: '#fff',
})
writeFileSync('diagram.png', png)
CLI equivalent:
am render diagram.mmd --format png --output diagram.png
import { renderMermaidASCII } from 'agentic-mermaid/agent'
const unicode = renderMermaidASCII(`flowchart LR
A --> B`)
const ascii = renderMermaidASCII(`flowchart LR
A --> B`, { useAscii: true })
If your coding agent can read repo files, point it at:
skills/agentic-mermaid-diagram-workflow/SKILL.md for diagram authoring/editing.skills/agentic-mermaid-live-editor/SKILL.md for editor changes.If it only has shell access:
am --agent-instructions
am capabilities --json
am preview diagram.mmd --security strict --open
am mutate diagram.mmd --op '{"kind":"add_node","id":"Cache","label":"Cache"}' --json
Zero-install prompt for a coding agent: read https://agentic-mermaid.dev/llms.txt and follow the parse → narrow → mutate → verify → serialize workflow. To wire Agentic Mermaid into another repo, run npx agentic-mermaid init-agent (or bun run bin/am.ts init-agent from a source checkout); it writes a non-clobbering AGENTS.md section, root skills/ bundle, and .mcp.json sample.
Use strict preview for human inspection and mutate --op/--ops for verified one-shot or batched edits.
For multi-step MCP edits, connect agentic-mermaid-mcp and use Code Mode execute(code) with the same mermaid.* SDK names. Stdio is the default transport; agentic-mermaid-mcp --transport http starts HTTP/SSE and managed PNG file/URL artifacts. See the agent API cookbook for copy-pasteable library, CLI, and MCP recipes.
Agentic Mermaid ships a Model Context Protocol server so MCP-capable agents can render and safely edit diagrams without shelling out.
agentic-mermaid-mcp runs a stdio server exposing execute (Code Mode sandbox), describe_sdk (one family's mutation schema on demand), render_png, describe, mutate, and build. Prefer declarative edits; use execute for custom logic. Package runners can use npx -y agentic-mermaid mcp; the mcp argument routes the package-name binary to the same stdio server. Add --transport http for HTTP/SSE with managed PNG file/URL artifacts. See docs/mcp-http-transport.md and docs/mcp-code-mode-rationale.md.https://agentic-mermaid.dev/mcp (tools: execute, describe_sdk, render_svg, render_ascii, render_png, verify, describe, mutate, and build; 64 KB input caps). Call describe_sdk for compact signatures or exact fields before authoring unfamiliar ops. It is MCP JSON-RPC only, not a REST render API. Hosted execute runs the same mermaid.* facade in a Cloudflare Dynamic Worker isolate with no network; hosted PNG returns base64 only.Local-first is the default posture: prefer the library, CLI, or a self-hosted MCP for anything sensitive, offline, larger than the hosted caps, or needing local PNG file/URL artifacts. The hosted endpoint is a public, unauthenticated convenience for zero-install render/verify/describe and bounded structured edits.
Directory maintainers can use the canonical MCP listing record. Hosted data handling is described in the MCP privacy notice.
import { parseRegisteredMermaid, asFlowchart, mutate, verifyMermaid, serializeMermaid } from 'agentic-mermaid/agent'
const parsed = parseRegisteredMermaid('flowchart TD\n API --> DB')
if (!parsed.ok) throw new Error('parse failed')
const flow = asFlowchart(parsed.value)
if (!flow) throw new Error(`not a structured flowchart: ${parsed.value.kind}`)
const next = mutate(flow, { kind: 'add_node', id: 'Cache', label: 'Cache' })
if (!next.ok) throw new Error(next.error.message)
const verify = verifyMermaid(next.value)
if (!verify.ok) throw new Error(JSON.stringify(verify.warnings, null, 2))
const source = serializeMermaid(next.value)
Rules:
as<Family> narrower before mutating an existing structured diagram.kind, not type.verifyMermaid before every commit point.mutate on opaque fallback bodies; the narrower returns null for unmodeled syntax.Family support is projected from the FamilyDescriptor registry; run
am capabilities --json for the live roster. (The Section A capability report
is no longer published.) See diagram families for syntax examples and
compatibility notes.
examples/agent-loop.tsexamples/mcp-vs-cli-complex-diagrams.tsexamples/agent-improve-auth-flow.tsAgentic Mermaid is a fork of Beautiful Mermaid by Luki Labs. The ASCII rendering engine is based on mermaid-ascii by Alexander Grooff and extended for Agentic Mermaid.
MIT
Agentic Mermaid: render, verify, and safely edit Mermaid diagrams as ASCII, PNG, SVG, or structured agent workflows — with composable styles (hand-drawn, excalidraw, watercolor, or your own as JSON).
{ "mcpServers": { "agentic-mermaid": { "command": "npx", "args": [ "-y", "[email protected]" ] } }}เครื่องมือ
ยังไม่มีรายการเครื่องมือ เซิร์ฟเวอร์แบบรีโมตจะได้รายการหลังการตรวจสอบสถานะครั้งแรก
FAQ
คัดลอกคอนฟิก stdio สำหรับ Cursor, Claude Desktop, Claude Code หรือ VS Code ได้ในหน้านี้ คอนฟิกนี้ใช้การติดตั้งของผู้เผยแพร่ ไม่ใช่พร็อกซีของ PlugMCP
ระเบียนนี้ไม่ได้ระบุตัวแปรสภาพแวดล้อมที่จำเป็น
Agentic Mermaid ทำงานแบบโลคัลผ่าน stdio
ตรวจสอบล่าสุดเมื่อ 2026-11-14 Agentic Mermaid: render, verify, and safely edit Mermaid diagrams as ASCII, PNG, SVG, or structured agent workflows — with composable styles (hand-drawn, excalidraw, watercolor, or your own as JSON).
