View Mermaid diagrams

Ask the agent for a Mermaid diagram. When its response contains a fenced mermaid block, Kora renders the diagram inline next to the source.

Supported diagram types

All standard Mermaid diagram types render:

• Flowchart — processes, decision trees, algorithms
• Sequence diagram — interactions, API calls
• Class diagram — data models, hierarchies
• ER diagram — entity relations
• Gantt — timelines, project plans
• State diagram — state machines, workflows
• Journey diagram — user paths
• Mindmap — brainstorming, ideas
• Gitgraph — branch histories
• Timeline — chronological events
• Quadrant chart — priority matrices
• XY chart — bar/line charts

When a diagram fails

If the Mermaid syntax contains an error, the source code is shown next to the error message returned by the renderer. Copy the source, fix the error, and ask the agent again — the corrected diagram replaces the failed one.

Troubleshooting

• Diagram shows as raw code → the fenced block is missing the mermaid language tag, or the syntax failed to parse. Confirm the fence reads ```mermaid.
• Diagram is cut off → large diagrams are scaled to fit the chat width. Right-click → open the image in a new tab for the full size.
• Node labels with special characters break → wrap labels containing (), [], or {}: in quotes (for example ["Label (with parens)"]).
• Theme looks wrong → diagrams render with the current Kora theme; switching themes regenerates the diagram on the next render.