# Mermaid Diagrams / Mermaid 图示

Preview and edit Mermaid diagrams in a sandboxed MCP App. Rendering works offline
with the bundled Mermaid 11.16.1 engine. English and Chinese UI follow the host's
locale; theme changes keep the current source edits.
The editor follows MCP Apps `hostContext.styles.variables` for surface, text
and border colors, including switches between theme packages in the same mode.
Mermaid uses explicit dark-mode derivation and themed ER attribute rows. Hosts
without style variables receive the editor's built-in light/dark palette.

在隔离的 MCP App 中预览和编辑 Mermaid 图示，内置 Mermaid 引擎，支持离线渲染。
界面跟随宿主的中英文和明暗主题设置，切换时保留编辑内容。

Install this directory through OpenAgent's local plugin installation. The package
uses the host-provided Node interpreter and has no credential or configuration
requirements. Its relay tool is discovered on request; default diagrams in
OpenAgent remain reply-text AGUI `Mermaid(source: ..., title?: ...)` components.

`render_mermaid` accepts complete `source` and optional `title`. It waits for
actual browser rendering and returns the original MCP ToolResult with `ok`,
`status`, diagram type and dimensions, or the concrete render error. App-only
claim/completion tools correlate an opaque one-shot render ID. A missing or
closed frontend fails after 25 seconds. The server requires MCP Apps MIME support, and the app checks the host
`openagent/tool-result-from-app` capability. A host without that capability
receives a bounded timeout error instead of a false success. No headless browser or
network is required.

The diagram uses the same figure/canvas and top-right fit, zoom, fullscreen,
copy-source and PNG/SVG download controls as host AGUI Mermaid. Source editing
is initially collapsed. Actual local edits also update model context; they do
not replace a completed ToolResult. Syntax failures offer an explicit Agent
repair action. The tool's error remains available to the model for correction.

The UI verifies parent messages and performs the standard MCP Apps initialization
handshake. It requests no network access. Source is data and Mermaid runs with
strict security. Editing stays in the mounted frame; a conversation reload
restores the original tool payload. Repeated host payloads and turn completion
preserve edits in the mounted frame. The app does not persist unsaved local edits.

Fit reserves the scaled SVG dimensions so tall and wide diagrams stay inside
the visible canvas. Zoomed diagrams scroll in both directions. Fullscreen uses
the available window height; resizing and mode changes refit the diagram while
preserving the current source. Escape returns to the inline editor.

Develop with `bun install --frozen-lockfile`, `bun run build`, and `bun test`.
The generated self-contained HTML must stay below 4 MiB; commit it and the
bundled Mermaid license so installed packages need no build step.