mermaid-visualizer

Installation
Summary

Convert text content into professional Mermaid diagrams with automatic syntax error prevention.

  • Supports six diagram types: process flows, circular cycles, comparisons, mindmaps, sequence diagrams, and state diagrams
  • Handles common syntax pitfalls automatically (list conflicts, subgraph naming, special characters) to ensure rendering in Obsidian, GitHub, and other Mermaid platforms
  • Configurable layout direction, detail level (simple to detailed), and professional color schemes with semantic meaning
  • Includes swimlanes, feedback loops, and hub-and-spoke patterns for organizing complex workflows and system architectures
SKILL.md

Mermaid Visualizer

Overview

Convert text content into clean, professional Mermaid diagrams optimized for presentations and documentation. Automatically handles common syntax pitfalls (list syntax conflicts, subgraph naming, spacing issues) to ensure diagrams render correctly in Obsidian, GitHub, and other Mermaid-compatible platforms.

Quick Start

When creating a Mermaid diagram:

  1. Analyze the content - Identify key concepts, relationships, and flow
  2. Choose diagram type - Select the most appropriate visualization (see Diagram Types below)
  3. Select configuration - Determine layout, detail level, and styling
  4. Generate diagram - Create syntactically correct Mermaid code
  5. Output in markdown - Wrap in proper code fence with optional explanation

Default assumptions:

  • Vertical layout (TB) unless horizontal requested
  • Medium detail level (balanced between simplicity and information)
Related skills
Installs
964
GitHub Stars
2.8K
First Seen
Jan 20, 2026