Maket

Overview Schema Source Related Servers Discussions Admin

maket_mermaid

Render Mermaid syntax into inline SVG and inject it into a Maket page to create flowcharts, sequence, class, ER, state, or XY charts.

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 durable inline SVG and injects it into the page HTML. The answer gives the document's reading path in Maket and the rendered diagram as an inline image (at most 1600 px and 1 MB of base64; beyond a 2:1 ratio, its top or left part). The source and semantic rendering choices stay on the wrapper so charte changes can rerender the diagram. 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. A document charte is applied automatically through canonical diagram tokens and documented color/font fallbacks. tokenRefs selects any existing charte token explicitly; direct safe values take final precedence. Density controls are supported for flowchart and state diagrams by the current renderer. Source-level Mermaid styling directives are rejected; use charte tokens or safe diagram options. Header on its own line: graph TD\n A-->B (NOT graph TD; A-->B)

Input Schema

Name	Required	Description
`bg`	No	Safe background colour. Overrides charte, profile, or tokenRefs.
`fg`	No	Safe foreground colour. Overrides charte, profile, or tokenRefs.
`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".
`font`	No	Safe primary font family. A fallback stack is normalized to its first family. Overrides charte, profile, or tokenRefs.
`line`	No	Safe connector colour. Overrides charte, profile, or tokenRefs.
`page`	Yes	Page number (1-based)
`muted`	No	Secondary text colour. Overrides charte, profile, or tokenRefs.
`theme`	No	Optional built-in diagram profile. Overrides automatic charte defaults; tokenRefs and direct values override it.
`width`	No	CSS width for the wrapper (e.g. "180mm", "100%"). Default: auto.
`accent`	No	Safe arrow/accent colour. Overrides charte, profile, or tokenRefs.
`border`	No	Node and group border colour. Overrides charte, profile, or tokenRefs.
`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.
`padding`	No	Flowchart/state canvas padding in px.
`surface`	No	Node surface colour. Overrides charte, profile, or tokenRefs.
`position`	No	Where to insert relative to target. Default: beforeend.
`targetId`	No	data-id of parent element to insert into. Default: page root.
`tokenRefs`	No	Explicit references to tokens on the document charte, keyed by diagram role. Example: {"bg":"color.paper","accent":"color.primary","font":"font.body"}.
`nodeSpacing`	No	Flowchart/state horizontal spacing between sibling nodes in px.
`transparent`	No	Render without an SVG background. Default: false.
`layerSpacing`	No	Flowchart/state vertical spacing between diagram layers in px.

Schema Changelog

Changes observed during successful MCP inspections.

Changed14 schema fields changedv2.1.0Sep 20, 2026

changedInput schema / properties / accent / description

Previous value: -"Arrow/accent color (hex). Overrides theme accent."New value: +"Safe arrow/accent colour. Overrides charte, profile, or tokenRefs."

changedInput schema / properties / bg / description

Previous value: -"Background color (hex). Overrides theme bg."New value: +"Safe background colour. Overrides charte, profile, or tokenRefs."

addedInput schema / properties / border

Added value: +{
+  "description": "Node and group border colour. Overrides charte, profile, or tokenRefs.",
+  "type": "string"
+}

changedInput schema / properties / fg / description

Previous value: -"Text/foreground color (hex). Overrides theme fg."New value: +"Safe foreground colour. Overrides charte, profile, or tokenRefs."

addedInput schema / properties / font

Added value: +{
+  "description": "Safe primary font family. A fallback stack is normalized to its first family. Overrides charte, profile, or tokenRefs.",
+  "type": "string"
+}

addedInput schema / properties / layerSpacing

Added value: +{
+  "description": "Flowchart/state vertical spacing between diagram layers in px.",
+  "maximum": 1000,
+  "minimum": 0,
+  "type": "number"
+}

changedInput schema / properties / line / description

Previous value: -"Line/connection color (hex). Overrides theme line."New value: +"Safe connector colour. Overrides charte, profile, or tokenRefs."

addedInput schema / properties / muted

Added value: +{
+  "description": "Secondary text colour. Overrides charte, profile, or tokenRefs.",
+  "type": "string"
+}

addedInput schema / properties / nodeSpacing

Added value: +{
+  "description": "Flowchart/state horizontal spacing between sibling nodes in px.",
+  "maximum": 1000,
+  "minimum": 0,
+  "type": "number"
+}

addedInput schema / properties / padding

Added value: +{
+  "description": "Flowchart/state canvas padding in px.",
+  "maximum": 1000,
+  "minimum": 0,
+  "type": "number"
+}

addedInput schema / properties / surface

Added value: +{
+  "description": "Node surface colour. Overrides charte, profile, or tokenRefs.",
+  "type": "string"
+}

changedInput schema / properties / theme / description

Previous value: -"Built-in theme name. Can be combined with custom color overrides."New value: +"Optional built-in diagram profile. Overrides automatic charte defaults; tokenRefs and direct values override it."

addedInput schema / properties / tokenRefs

Added value: +{
+  "additionalProperties": false,
+  "description": "Explicit references to tokens on the document charte, keyed by diagram role. Example: {\"bg\":\"color.paper\",\"accent\":\"color.primary\",\"font\":\"font.body\"}.",
+  "properties": {
+    "accent": {
+      "description": "Charte token reference for accent, as \"group.key\".",
+      "type": "string"
+    },
+    "bg": {
+      "description": "Charte token reference for bg, as \"group.key\".",
+      "type": "string"
+    },
+    "border": {
+      "description": "Charte token reference for border, as \"group.key\".",
+      "type": "string"
+    },
+    "fg": {
+      "description": "Charte token reference for fg, as \"group.key\".",
+      "type": "string"
+    },
+    "font": {
+      "description": "Charte token reference for font, as \"group.key\".",
+      "type": "string"
+    },
+    "layerSpacing": {
+      "description": "Charte token reference for layerSpacing, as \"group.key\".",
+      "type": "string"
+    },
+    "line": {
+      "description": "Charte token reference for line, as \"group.key\".",
+      "type": "string"
+    },
+    "muted": {
+      "description": "Charte token reference for muted, as \"group.key\".",
+      "type": "string"
+    },
+    "nodeSpacing": {
+      "description": "Charte token reference for nodeSpacing, as \"group.key\".",
+      "type": "string"
+    },
+    "padding": {
+      "description": "Charte token reference for padding, as \"group.key\".",
+      "type": "string"
+    },
+    "surface": {
+      "description": "Charte token reference for surface, as \"group.key\".",
+      "type": "string"
+    },
+    "transparent": {
+      "description": "Charte token reference for transparent, as \"group.key\".",
+      "type": "string"
+    }
+  },
+  "type": "object"
+}

addedInput schema / properties / transparent

Added value: +{
+  "description": "Render without an SVG background. Default: false.",
+  "type": "boolean"
+}

Changed1 schema field changedv1.7.0Aug 11, 2026

changedInput schema / $schema

Previous value: -"http://json-schema.org/draft-07/schema#"New value: +"https://json-schema.org/draft/2020-12/schema"

First observedv0.1.0Jul 29, 2026

TDQS

A4.8/5.0

Behavior5/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden and does so: it discloses the return payload (reading path plus inline image, capped at 1600 px / 1 MB base64, cropped beyond a 2:1 ratio), idempotent in-place replacement when dataId already exists, automatic charte application with an explicit precedence order, and renderer support limits for density controls. This is exactly the operational context annotations would otherwise supply.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Front-loaded with the usage trigger and dense with non-redundant rules; nearly every sentence adds a constraint. The header-format reminder ("header on its own line... NOT graph TD; A-->B") repeats what the code parameter schema already documents, a minor redundancy in an otherwise tight block.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a 22-parameter mutation tool with no annotations and no output schema, the description covers the return value, idempotency, styling limitations, scaling behavior, and theming precedence — the gaps an agent would otherwise have to discover by trial. Nothing essential to correct invocation appears missing.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so the baseline is 3, but the description adds meaning beyond it: precedence across charte vs tokenRefs vs direct safe values, the fact that source/semantic choices are persisted on the wrapper so charte changes can rerender, and that padding/nodeSpacing/layerSpacing only apply to flowchart and state diagrams. The precedence rule partially duplicates schema wording, which keeps this from a 5.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb and resource ("Renders Mermaid syntax to durable inline SVG and injects it into the page HTML") and enumerates supported diagram types (flowchart, sequence, class, ER, state, XY). It also distinguishes itself from competing approaches ("Pick this over manual SVG or nested divs when the thing you want is conceptually a graph"), so an agent can route correctly without opening the schema.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Opens with an explicit "When to use: add a diagram to a page" trigger and names alternatives plus the condition that selects this tool over them. It also states a constraint that functions as a when-not ("Source-level Mermaid styling directives are rejected; use charte tokens or safe diagram options"), leaving little to inference.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Deploy Server

maket_mermaid

Instructions

Input Schema

Schema Changelog

TDQS

Other Tools