maket_mermaid
Render Mermaid diagrams as SVG in page HTML. Supports flowcharts, sequence, class, ER, state, and XY chart diagrams.
Instructions
When to use: add a diagram to a page. Works for flowcharts, sequence, class, ER, state, and XY chart diagrams. Pick this over manual SVG or nested divs when the thing you want is conceptually a graph.
Renders Mermaid syntax to SVG and injects it into the page HTML. The diagram scales with its wrapper (width/height drive the frame, not the SVG itself). If dataId already exists, the diagram is replaced in place — idempotent edits. Header on its own line: graph TD\n A-->B (NOT graph TD; A-->B)
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| bg | No | Background color (hex). Overrides theme bg. | |
| fg | No | Text/foreground color (hex). Overrides theme fg. | |
| doc | Yes | Document name | |
| code | Yes | Mermaid diagram syntax. Header on its own line, then statements. E.g. "graph TD\n A-->B\n B-->C". | |
| line | No | Line/connection color (hex). Overrides theme line. | |
| page | Yes | Page number (1-based) | |
| theme | No | Built-in theme name. Can be combined with custom color overrides. | |
| width | No | CSS width for the wrapper (e.g. "180mm", "100%"). Default: auto. | |
| accent | No | Arrow/accent color (hex). Overrides theme accent. | |
| dataId | No | data-id for the wrapper element. Default: auto-generated (mermaid-1, mermaid-2...) | |
| height | No | CSS height for the wrapper (e.g. "120mm"). Default: auto. | |
| position | No | Where to insert relative to target. Default: beforeend. | |
| targetId | No | data-id of parent element to insert into. Default: page root. |