Building a Diagramming Workflow in Obsidian

Two Ways to Diagram in Obsidian

Obsidian supports two complementary approaches to diagramming, and using both together gives you the best of both worlds:

1. Excalidraw Plugin — Visual Sketching

The Excalidraw plugin is one of the most installed Obsidian community plugins. It lets you create hand-drawn-style diagrams that live directly in your vault as .excalidraw.md files.

• Draw shapes, arrows, and text with a visual canvas
• Embed diagrams in other notes using Obsidian transclusion
• Link to and from other notes in your vault
• Diagrams are stored as Markdown files — searchable and versionable

2. Mermaid Code Blocks — Text-Based Diagrams

Obsidian natively renders Mermaid code blocks in preview mode. Just wrap your Mermaid syntax in a fenced code block:

```mermaid
graph LR
    A[User] --> B[API Gateway]
    B --> C[Auth Service]
    B --> D[Data Service]
```

• No plugin needed — works out of the box
• Diagrams are pure text — perfect for version control
• Supports flowcharts, sequence diagrams, ERDs, Gantt charts, and more
• Renders in real-time as you type in preview mode

When to Use Which

• Excalidraw — Use for architecture overviews, system designs, and any diagram where spatial layout matters. Best when you want to freely arrange elements and add visual emphasis.
• Mermaid — Use for flowcharts, sequence diagrams, and any diagram that has a clear logical structure. Best when the diagram should be embedded inline and updated quickly by editing text.

Exporting Diagrams for External Use

Diagrams created in Obsidian live in your vault — great for personal notes, but you often need to share them with teams that use different tools. This is where format conversion becomes essential:

• .excalidraw.md → .drawio — Share with teams using Draw.io or embed in Confluence.
• .excalidraw.md → .svg — Export for presentations, documentation sites, or email.
• .mmd → .drawio — Convert text-based diagrams to a visual editor for further refinement.
• .mmd → .svg — Generate high-quality images from Mermaid code.

Orriguii Diagram Converter handles all of these conversions in your browser — no upload, no account, no installation.

Setting It Up

• Install the Excalidraw plugin— Go to Settings → Community Plugins → Browse → search “Excalidraw” → Install & Enable.
• Create a dedicated folder — Store diagrams in a consistent location like /diagrams/ for easy discovery.
• Use templates — Create Excalidraw templates for recurring diagram types (architecture, sequence, etc.).
• Embed in notes — Use ![[diagram.excalidraw]] to embed diagrams inline in your Markdown notes.