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

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):

5. 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: