Document editor
Math and Mermaid diagrams
Render inline and block KaTeX expressions plus Mermaid code fences in the live Markdown editor.
Updated
By Kition Docs
Verified against Kition 0.1.41 (d3e1b931) on 2026-08-29
Inline and block math
Kition uses KaTeX for math. Inline expressions use a single $ pair without leading or trailing whitespace inside the delimiters. Display expressions use $$...$$ and can span lines.
Move the cursor into the expression to reveal its source. Invalid expressions remain editable and display an error treatment rather than deleting the TeX.
Inline: $E = mc^2$
Block:
$$
\int_0^1 x^2 \, dx = \frac{1}{3}
$$Mermaid code fences
A fenced code block whose language is exactly mermaid renders through the bundled Mermaid service. The editor shows a loading or error state while the diagram is being processed and provides an edit-source action on the preview.
Use the slash menu to insert a Mermaid diagram or math expression without typing the delimiters manually.
```mermaid
flowchart LR
Draft --> Review --> Publish
```Review portability and errors
- Keep the TeX or Mermaid source in version control or backups; the source remains the canonical content
- Quote Mermaid labels that contain punctuation when Mermaid syntax requires it
- A diagram that fails in Kition should be simplified and tested against the bundled Mermaid version
- Another Markdown application may not render Kition math or Mermaid previews even though it can read the source fence
Export boundaries
HTML and PDF export inline rendered Mermaid output before saving. Document export has its own format-specific pipeline, so inspect generated PDF and DOCX files rather than assuming every editor decoration will round-trip identically.
Implementation sources
- v0.1.41: src/features/document/editor/editor/extensions/math-preview.ts
- v0.1.41: src/features/document/editor/editor/extensions/live-preview.ts
- v0.1.41: src/features/document/editor/editor/extensions/slash.ts
- v0.1.41: src/services/math.ts
- v0.1.41: src/services/mermaid.ts
- v0.1.41: src/services/markdownRenderer.ts
