# 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 >](https://innovator.atlassian.net/wiki/spaces/MDFC/pages/335085586)

## [#](#how-to-embed-a-diagram)🚀 How to Embed a Diagram

1. **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.
2. **Copy the Mermaid Code**  
Capable Diagrams provides code formatted for `mermaid`, which is what Capable Markdown understands and renders.
3. **Open Your Markdown Content**  
Navigate to the Markdown file or section where you want the diagram to appear.
4. **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):

![Insert diagrams into Markdown in Confluence](https://help.gocapable.com/images/9ce5d1c1-2366-4bf3-8006-18f244208f04.webp)

1. **Save and View**  
Once saved, your diagram will be rendered inline—right inside your content.

## [#](#notes)📌 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)🔍 Example

Here’s an example of how a diagram might look in Markdown:

![Diagrams into Markdown in Confluence](https://help.gocapable.com/images/166aeafc-df9e-49d1-a4c8-ef66413571be.webp)