Integration with Capable Markdown
You can embed rich, interactive diagrams in your Markdown content using Capable Diagrams and the mermaid
syntax block within Capable Markdown. This allows you to include technical diagrams directly inline—perfect for documentation, design specs, flowcharts, and more.
Read the full documentation over on Capable Markdown docs >
🚀 How to Embed a Diagram
Create Your Diagram in Capable Diagrams
Use the visual editor to build your diagram. Once you're happy with the layout, you’ll get a snippet of Mermaid code that represents your diagram.Copy the Mermaid Code
Capable Diagrams provides code formatted formermaid
, which is what Capable Markdown understands and renders.Open Your Markdown Content
Navigate to the Markdown file or section where you want the diagram to appear.Insert a Diagram Code Block
Use the Markdown toolbar and click the Diagrams button (or type it manually), then paste your diagram code into a fenced code block (replace mermaid with the diagram language):

Save and View
Once saved, your diagram will be rendered inline—right inside your content.
📌 Notes
Make sure the code block begins with ```mermaid and ends with ```.
You can edit the diagram anytime by updating the Mermaid code.
Great for:
System architecture diagrams
Process flows
Org charts
Sequence diagrams
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
🔍 Example
Here’s an example of how a diagram might look in Markdown:
