← Content types

Diagrams

Place Mermaid diagrams into your slides in three modes: a static image, a step-by-step Morph animation, or fully editable native shapes.

Three modes

All three modes use the same domain/diagram feature and the same API/MCP surface; the mode is set when you create the diagram.

Mermaid rendering

Static and morph diagrams are rendered by a self-hosted Mermaid render service running alongside Slidura. Render jobs are asynchronous — after creating a diagram you poll the status endpoint (or use the web UI’s status indicator) until it reaches ready.

The render service can also produce an SVG output for the native-shapes path, so a Mermaid diagram authored as text can end up as editable shapes in your deck.

Morph build-up animation

@diagram-morph expands the slide carrying the sentinel into one still slide per step — each step shows a cumulative view of the diagram, scaled to fill the frame. PowerPoint’s Morph transition then animates the progression natively on slide advance. No embedded video; no external player. The step grouping is derived automatically from subgraph blocks in your Mermaid source, or you can supply explicit steps.

Native shapes

@diagram-native runs a pure SVG-to-shapes transcoder (svgdeck) at build time against the template the build uses. Shapes snap to the template’s colour theme automatically (nearest-colour matching in CIELAB ΔE space). The transcode targets standard autoshapes and custom-geometry freeforms; elements that cannot be represented as shapes (gradients, filters, clip-paths) fall back to a rasterised sub-region and are reported in the build output.

You can also supply an arbitrary SVG (not Mermaid) for the native path — the same transcode runs regardless of the SVG’s origin.

Per-template theme

Each template can carry a Mermaid theme configuration that is applied automatically when rendering diagrams against that template. Set it from the template’s Overview tab or via PUT /api/v1/templates/{id}/theme. This controls the Mermaid theme variables, font family, and background colour for rendered diagrams.

Placing a diagram in a fill

{ "diagram_placeholder_1": "@diagram:<id>" }

Use @diagram-morph:<id> or @diagram-native:<id> for the respective modes.

API and MCP

Agent flow: create_diagram → poll get_diagram_status until ready → call get_diagram to retrieve the build_ref sentinel → drop the sentinel into a submit_build fill.