Skip to main content
Skip table of contents

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

image-20250424-123543.png
  1. 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

CODE
```mermaid
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
```

🔍 Example

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

Screenshot 2025-04-24 at 13.34.43.png

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.