obsidian-mermaid_skill

Overview

This skill generates Obsidian-compatible Mermaid diagrams optimized for reliable rendering and mobile-friendly layouts. It favors square layouts (flowchart TB with subgraph LR) and enforces plain-text, short labels so diagrams publish without Obsidian preview errors. Use it to produce flowcharts, sequence diagrams, ER diagrams, or to convert ASCII art into Mermaid.

How this skill works

The skill produces Mermaid code that follows Obsidian constraints: no Markdown in node labels, subgraph names without special characters, and labels under ~15 characters. It prefers a TB outer flow with LR subgraphs to achieve a compact, near-square layout and uses invisible connectors for alignment. Complex descriptions are moved outside the diagram as accompanying text.

When to use it

• Creating flowcharts, process or sequence diagrams for Obsidian notes
• Converting ASCII diagrams into clean Mermaid code
• Fixing Mermaid rendering errors (unsupported markdown in labels)
• Making diagrams mobile- and preview-friendly in Obsidian
• Splitting complex relationships into multiple simple diagrams

Best practices

• Keep node labels short (under ~15 characters); put details below the diagram
• Use flowchart TB as the outer layout and direction LR inside subgraphs for square layouts
• Never include Markdown (headings, lists, <br/>) in node labels
• Avoid special characters in subgraph identifiers; use safe names like Phase_One
• Limit nodes per diagram (aim ≤5) and split complex flows into multiple simple diagrams

Example use cases

• Simple decision flow for a feature release: Start → Decision → Action/End
• Process overview with detailed steps described in the paragraph below the diagram
• Frontend/backend integration diagram using subgraphs for each layer
• Converting a two-box ASCII sketch into a TB Mermaid flowchart
• Breaking a complex workflow into three compact diagrams for a documentation page