Rich Content
Use Mermaid diagrams, Chart.js charts, Graphviz graphs, KaTeX math, and callouts in your documents.
Rich Content
Unmarkdown™ renders rich content automatically from standard markdown syntax. No special configuration is needed. All rich content elements are styled to match your chosen template's color scheme.
Mermaid diagrams
Use fenced code blocks with the mermaid language identifier. Unmarkdown™ supports 12 Mermaid diagram types: flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, pie charts, gantt charts, user journeys, mindmaps, timelines, quadrant charts, and git graphs.
Flowchart
```mermaid
graph TD
A[User Request] --> B{Authenticated?}
B -->|Yes| C[Process Request]
B -->|No| D[Return 401]
C --> E[Return Response]
```
Sequence diagram
```mermaid
sequenceDiagram
participant Client
participant API
participant DB
Client->>API: POST /v1/documents/publish
API->>DB: INSERT document
DB-->>API: document record
API-->>Client: { published_url }
```
Chart.js charts
Use fenced code blocks with the chart language identifier. Provide a JSON configuration object. Unmarkdown™ supports 8 chart types: bar, line, pie, doughnut, radar, polar area, scatter, and mixed.
IMPORTANT
Use the chart language identifier, not json. Using json will render the block as syntax-highlighted JSON instead of a chart.
```chart
{
"type": "bar",
"data": {
"labels": ["Q1", "Q2", "Q3", "Q4"],
"datasets": [{
"label": "Revenue ($K)",
"data": [120, 190, 300, 450]
}]
}
}
```
Graphviz graphs
Use fenced code blocks with a Graphviz engine name as the language identifier. Available engines:
| Engine | Language | Best for |
|---|---|---|
| dot | dot | Directed graphs (default) |
| neato | neato | Network topologies, undirected |
| twopi | twopi | Radial layouts |
| circo | circo | Circular layouts |
| fdp | fdp | Force-directed, undirected |
| sfdp | sfdp | Large-scale force-directed |
| osage | osage | Clustered layouts |
| patchwork | patchwork | Treemaps |
NOTE
Use dot or a specific engine name (e.g., neato), not graphviz.
```dot
digraph G {
rankdir=LR;
API -> Documents;
API -> Templates;
API -> Convert;
Documents -> Publish;
Documents -> Share;
}
```
KaTeX math
Use $...$ for inline math and $$...$$ for display math.
Inline math
The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$.
Display math
$$\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}$$
Matrix
$$\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}$$
Callouts
Use GitHub-compatible callout syntax inside blockquotes. Five types are available:
> [!NOTE]
> General information the reader should be aware of.
> [!TIP]
> Helpful suggestions for a better experience.
> [!IMPORTANT]
> Critical details that should not be missed.
> [!WARNING]
> Potential issues that could cause problems.
> [!CAUTION]
> Dangerous or destructive actions to be careful with.
NOTE
General information the reader should be aware of.
TIP
Helpful suggestions for a better experience.
WARNING
Potential issues that could cause problems.
Additional formatting
Unmarkdown™ also supports these extended markdown features:
| Syntax | Result |
|---|---|
==text== | Highlighted text |
^text^ | Superscript |
~text~ | Subscript |
~~text~~ | Strikethrough |
- [x] Task | Checked task list item |
- [ ] Task | Unchecked task list item |
Next steps
- Working with Templates: Choose a template that complements your rich content
- Converting for Destinations: How rich content translates across destinations