# Diagrams in fenced code blocks

A fenced code block written in one of 27 supported diagram languages is rendered as an SVG image by Capable's hosted diagram service. Supported: blockdiag, bpmn, bytefield, seqdiag, actdiag, nwdiag, packetdiag, rackdiag, c4plantuml, d2, dbml, ditaa, erd, excalidraw, graphviz, mermaid, nomnoml, pikchr, plantuml, structurizr, svgbob, umlet, tikz, vega, vegalite, wavedrom, wireviz. Mermaid C4 syntax is silently rewritten to c4plantuml.

---

## Worth knowing

Requires a signed-in session; without a token the block stays as plain code with no error. The diagram source travels to Capable's service inside the image URL.

---

## Where to find it

Anywhere in a Markdown document

---

## Where you do it

![Top of the Capable Markdown editor showing the title field, templates dropdown and formatting toolbar, with the diagram button selected and a tooltip reading Diagram.](https://help.gocapable.com/images/f7787fba-db1f-4e3e-a7ae-4d494c7184d4.webp)

The editor toolbar carries a diagram button for adding a fenced block of diagram code.

| **Task**      | **Where**                                                     |
| ------------- | ------------------------------------------------------------- |
| Add a diagram | Editor > Insert > From code, or write a fenced block yourself |

---

## Related

[Images in MarkdownAnother part of how this works.](https://help.gocapable.com/jira-markdown/images-in-markdown.html)

[Markdown search index (issue entity property)Another part of how this works.](https://help.gocapable.com/jira-markdown/markdown-search-index-issue-entity-property.html)

[How it worksThe rest.](https://help.gocapable.com/jira-markdown/how-it-works.html)

---

_How it actually behaves._