Rich output

Enkaidu’s responses are rendered as rich Markdown. Beyond standard formatting (headings, lists, tables, blockquotes), code blocks do more than sit there highlighted: several fence types render as interactive blocks — Mermaid and SVG diagrams, Vega-Lite charts, and live Markdown previews — alongside the usual syntax-highlighted source.

Code blocks

Fenced code blocks are syntax-highlighted with a warm, low-contrast palette that matches the rest of the UI in both light and dark modes.

Hover over a code block to reveal a Copy button in the top-right corner. It copies the original source (not the highlighted markup), so you can paste it into an editor or terminal.

A syntax-highlighted code block with the copy button visible on hover

Inline code uses a subtle background tint. Longer blocks get a card-style container with rounded corners and a subtle border.

Renderable blocks New in 0.9.13

Some fenced blocks render as an interactive card instead of plain code. All of these blocks share the same behavior:

The card header shows the block’s language on the left and small chips on the right: a pair of toggle chips switches between the rendered view and the source view, and Save … chips download the content (e.g. a rendered diagram as diagram.svg).
The source view shows the original fence contents, syntax-highlighted, with the same hover Copy button as ordinary code blocks.
Blocks render as they stream in — you watch the source arrive and the rendered view fill in — and re-render if the content changes.
If a block fails to render (bad JSON in a chart spec, for example), the card automatically switches to the source view with an error message so you can see what went wrong.

Mermaid diagrams

When Enkaidu’s response contains a fenced ``` mermaid block, it renders as an interactive diagram rather than showing the raw code.

The header toggle chips switch between Diagram (the rendered SVG) and Code (the original Mermaid source). Save Source downloads the Mermaid source as diagram.mmd; Save SVG downloads the rendered diagram as diagram.svg.

A rendered Mermaid diagram with the Diagram/Code toggle visible in the header

CSV tables

A fenced csv block renders the data as a table, letting you scroll through the data when there are too many rows.

Vega-Lite charts New in 0.9.13

JSON chart specifications render as interactive, responsive charts. Tag the fence vega-lite (or vega), or just ``` json — a block is recognized as a chart when its JSON carries a Vega $schema or the core data + mark/layer shape, so even an untagged chart spec comes to life.

Charts are drawn as vector graphics at full panel width (they reflow to fit the available width) and adapt to light and dark mode. Toggle between Chart and JSON, and use Save JSON (chart.json) to take the spec with you or Save SVG (chart.svg) to take the rendered image.

SVG diagrams

A fenced ``` svg block renders the SVG inline — icons, illustrations, vector graphics — as crisp scalable vector output. And even when a response puts raw SVG markup in an unlabeled (or xml/html/plain-text) code fence, Enkaidu recognizes it and renders the picture instead of showing you markup.

A rendered SVG image of a beaver on a scooter

Toggle between Diagram and Source as usual; Save SVG downloads the image as picture.svg.

Markdown previews

A fenced markdown (or md) block is itself rendered as rich Markdown — a live preview of the note inside the fence, styled exactly like the rest of the transcript. Toggle to Source to read the raw Markdown, and Save Source downloads it as note.md.

What Enkaidu can produce

These rendering capabilities mean you can ask Enkaidu for things like:

“Draw a sequence diagram of how my auth flow works” → mermaid diagram
“Chart my month-by-month spending as a bar chart” → interactive Vega-Lite chart
“Draft the README as a standalone document” → live-rendered Markdown preview
“Show me the code for that function” → highlighted code block
“Summarize this in a table” → Markdown table
“What’s wrong with this config?” → inline code + explanation