skills.rest
jykim
jykimCOMMUNITY
Explore all skills by this author →
GitHub

obsidian-mermaid

Generate Obsidian-compatible Mermaid diagrams with plain labels and TB layouts.

49|9|Updated Nov 26, 2025
Search Tags:#mermaid#validation#obsidian#flowchart#diagram
One-click install
npx skills add https://github.com/jykim/claude-obsidian-skills --skill obsidian-mermaid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: obsidian-mermaid
Source: https://github.com/jykim/claude-obsidian-skills/tree/main/obsidian-mermaid
Command: npx skills add https://github.com/jykim/claude-obsidian-skills --skill obsidian-mermaid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mermaid diagrams often render with errors in Obsidian when labels or layout violate simple constraints. This skill provides best-practice guidelines to build clean diagrams without common pitfalls.

Core Features & Use Cases

  • No markdown in labels: Keeps labels plain text to avoid rendering issues.
  • TB direction by default: Prefers top-to-bottom layouts for publishing.
  • Label length guidance: Encourages concise labels for readability.
  • Use Case: Create a flowchart that renders consistently across Obsidian previews.

Quick Start

Create a simple diagram with plain labels: flowchart TB; A[Start] --> B[End].

Frequently Asked Questions about obsidian-mermaid

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why do my Mermaid diagrams render with errors in Obsidian?▼

Mermaid diagrams in Obsidian fail when labels contain Markdown syntax, exceed length constraints, or use incompatible layout directions. This Skill enforces plain-text labels, top-to-bottom layouts, and concise node names to ensure consistent rendering in Obsidian preview.

How do I create a flowchart in Obsidian that actually renders?▼

Build flowcharts using plain text labels under 15 characters, top-to-bottom direction, and no Markdown formatting. Use simple syntax like `flowchart TB; A[Start] --> B[End]` and validate in Obsidian preview before publishing.

Can I convert ASCII diagrams to Mermaid for Obsidian?▼

Yes. Convert ASCII diagrams to Mermaid syntax, then apply Obsidian-compatible constraints: remove Markdown from labels, default to TB direction, keep node counts minimal, and use safe subgraph naming to ensure clean rendering.

What Mermaid diagram types work best in Obsidian?▼

Flowcharts, sequence diagrams, and ER diagrams work well in Obsidian when built with plain labels, TB layout, and minimal complexity. This Skill provides validation guidelines for all three formats to prevent rendering failures.

Do I need special plugins to render Mermaid diagrams in Obsidian?▼

Obsidian has built-in Mermaid support. This Skill focuses on diagram best practices—plain labels, TB direction, short node names, and safe subgraph naming—to work reliably without additional configuration or plugins.

What are common Mermaid mistakes in Obsidian publishing?▼

Common issues include Markdown in labels, non-TB layout directions, overly long node names, and unsafe subgraph identifiers. Stick to plain text, keep labels under 15 characters, use TB by default, and validate in preview mode.

Related Skills

Explore More Design & Creative Skills→
HeXiao-55HeXiao-55
1

mermaid-diagram

Create Mermaid diagrams from requirements and validate syntax.

Community
Advanced
darellchua2darellchua2
4

ascii-diagram-creator

Convert user-defined workflows into ASCII diagrams and save as image files.

Community
Advanced
EvolutionAPIEvolutionAPI
520

obs-obsidian-markdown

Create and edit Obsidian Flavored Markdown with wikilinks, embeds, callouts, and YAML frontmatter.

Official
Intermediate
jimmc414jimmc414
557

scientific-schematics

Generate publication-quality scientific diagrams and flowcharts as SVG or EPS vector graphics.

Community
Intermediate