Maket

Overview Schema Source Related Servers Discussions Admin

maket_mermaid

Render Mermaid syntax into inline SVG diagrams embedded in your page. Supports flowcharts, sequence, class, ER, state, and XY charts with in-place replacement for existing 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 durable inline SVG and injects it into the page HTML. 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

TableJSON 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.5/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 behavioral disclosure burden and does so thoroughly. It explains the rendering pipeline (Mermaid to inline SVG), idempotent replacement via dataId, scaling behavior (wrapper drives frame), precedence of direct values over tokenRefs over charte, density-control limitations to flowchart/state, and rejection of raw Mermaid styling directives. This is rich, non-obvious behavior that the schema alone does not convey.

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?

The description is front-loaded with the 'When to use' paragraph, which aids quick comprehension. It is dense and lacks bullet points, but every sentence adds substantive information (e.g., syntax requirement, scaling, idempotency, styling constraints). For a tool with 22 parameters and no annotations, this density is justified.

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

Completeness4/5

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

For a complex tool with 22 parameters and no output schema, the description covers the crucial behavioral aspects: supported diagram types, injection mechanism, idempotency, scaling, styling precedence, and Mermaid syntax constraints. It does not explicitly state the return value, but that is not essential for correct invocation. Overall, it is complete enough for an agent to use the tool effectively.

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. The description adds cross-parameter meaning beyond the schema: it clarifies the precedence order among direct values, tokenRefs, and charte; specifies that the Mermaid code header must be on its own line; and ties density parameters (padding, nodeSpacing, layerSpacing) to flowchart/state diagrams. This lifts it above the baseline.

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?

The description clearly states the tool's purpose with a specific verb and resource: 'Renders Mermaid syntax to durable inline SVG and injects it into the page HTML.' It also lists supported diagram types (flowcharts, sequence, class, ER, state, XY chart) and distinguishes it from alternatives like manual SVG or nested divs, making it easy to differentiate from sibling tools.

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

Usage Guidelines4/5

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

The description opens with an explicit trigger: 'When to use: add a diagram to a page.' It also provides a clear decision rule: 'Pick this over manual SVG or nested divs when the thing you want is conceptually a graph.' However, it does not name sibling MCP tools (e.g., maket_image, maket_html) as alternatives, so the guidance stops short of being fully explicit about competing tools.

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