> Content index: https://quillly.com/docs/llms.txt
> Canonical page: https://quillly.com/docs/syntax
---
title: Markdown syntax: pictures, CTAs, callouts and citations
description: The Markdown syntax Quillly adds: Mermaid, chart, HTML, SVG and screenshot pictures, call-to-action blocks and links, callouts and source citations.
keywords: markdown syntax, mermaid, callouts
published: 2026-09-24
updated: 2026-09-24
url: https://quillly.com/docs/syntax
word_count: 1892
---
# Markdown syntax: pictures, CTAs, callouts and citations
> The Markdown syntax Quillly adds: Mermaid, chart, HTML, SVG and screenshot pictures, call-to-action blocks and links, callouts and source citations.
Canonical: https://quillly.com/docs/syntax
Published: 2026-09-24
Quillly reads ordinary Markdown plus a few additions of its own: fenced blocks that become pictures, call-to-action blocks and links, callouts, and source citations. This page is the reference for that Markdown syntax, with every option Quillly accepts and an example you can copy for each. Your AI writes this syntax when it creates or updates a page, and anything else that sends Markdown to Quillly can use it too. In the editor, the same blocks come from the slash menu instead.
## The Markdown syntax of a fenced block
A fenced block starts with a line of three backticks followed directly by its kind, such as `image:mermaid`, and then its attributes. The lines after it are the body, written in the kind's own language. A line of three backticks on its own ends the block.
> [!NOTE]
> A code block ends at the first line that starts with three backticks, so a code block cannot show a whole fenced block. The examples below give the first line and the body as two separate blocks. To use one, type three backticks and then the first line, add the body, and close with a line of three backticks.
## Pictures made from code
The same Markdown syntax covers five kinds of block that are drawn into pictures when you save the page:
| Kind | The body is | In the editor |
| --- | --- | --- |
| `image:mermaid` | A diagram in Mermaid syntax | **Diagram** in the slash menu |
| `image:chart` | A chart configuration in JSON | **Chart** |
| `image:html` | HTML, with Tailwind classes available | **Custom visual** |
| `image:svg` | One SVG drawing | **Custom visual**, then the SVG kind |
| `image:screenshot` | The address of a web page to capture | Not available, ask your AI |
Every kind takes the same attributes on its first line:
| Attribute | What it does |
| --- | --- |
| `alt="…"` | Describes the picture. It becomes the image's alt text, and the SEO score counts a picture without one as missing. Write it in double quotes. |
| `caption="…"` | Text shown under the picture. An *italic line* right after the block works too. |
| `align=left`, `align=center` or `align=right` | Where the picture sits. Center is the default. |
| `width=720` | The picture's width on the page, in pixels. Diagrams, charts, HTML and SVG are also drawn at this width, from 320 to 1600, and the default is 800. |
When the page is saved, Quillly draws each block on a white card, with your site's primary colour as the accent and your domain in a small label in the bottom corner, and serves the result as an ordinary image. Until a picture is ready, the page shows the block's code instead. A picture is drawn again when its code, its width or your primary colour changes.
### Diagrams: image:mermaid
The body is a [Mermaid](https://mermaid.js.org/intro/) diagram: a flowchart, a sequence diagram, a mind map or any other type Mermaid supports.
First line, after the three backticks:
```text
image:mermaid alt="A flow from draft to published, with an optional review step" width=520
```
Body:
```text
flowchart TB
A[Draft] --> B[Review]
B --> C[Published]
A -->|Publish now| C
```
It renders like this:
Write flowcharts top to bottom with `flowchart TB`. A [left-to-right flowchart](https://mermaid.js.org/syntax/flowchart.html) with more than three boxes shrinks to fit the column, and the SEO score flags it. Mermaid runs in strict mode, so click actions and links inside the diagram are ignored.
### Charts: image:chart
The body is a [Chart.js](https://www.chartjs.org/docs/latest/) configuration written as JSON, with `type`, `data` and, if you like, `options`.
First line:
```text
image:chart alt="Bar chart of monthly visits to the Acme docs from January to June"
```
Body:
```json
{
"type": "bar",
"data": {
"labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
"datasets": [
{ "label": "Docs visits", "data": [1284, 1570, 1893, 2210, 2468, 2931] }
]
},
"options": {
"plugins": { "title": { "display": true, "text": "Visits to the Acme docs, 2026" } }
}
}
```
It renders like this:
The body must be valid JSON, so it cannot contain functions or comments. Animation is turned off, and datasets without their own colours get a palette that starts with your site's primary colour. Pie, doughnut, polar area and radar charts are drawn wide, with the legend on the right, unless the options say otherwise.
### Custom visuals: image:html
The body is HTML. [Tailwind utility classes](https://tailwindcss.com/docs/styling-with-utility-classes) work, and so do these CSS variables: `var(--brand)` holds your site's primary colour, and `var(--ink)`, `var(--surface)`, `var(--border)` and `var(--muted)` hold the card's text, background, border and muted colours.
First line:
```text
image:html alt="Two cards comparing median load time before and after caching" width=720
```
Body:
```html
Before caching
4.2 s
Median load time
After caching
0.9 s
Median load time
```
It renders like this:
Scripts, event handlers, frames and links to other files are removed before drawing. The drawing has no internet access, so a picture inside the HTML must be written into it, as inline SVG or a `data:` address. Most pictures in these docs are drawn this way.
### Vector drawings: image:svg
The body is one `