mermaid-visualizer

Mermaid-visualizer transforms text content into clean, professional Mermaid diagrams for presentations and documentation. It solves a common and frustrating problem: Mermaid diagrams frequently fail to render because of subtle syntax pitfalls, so the skill builds in error prevention to ensure output renders correctly in Obsidian, GitHub, and other Mermaid-compatible platforms.

The skill provides a short workflow — analyze the content, choose the most appropriate diagram type, select layout/detail/style, generate syntactically correct code, and output it in a fenced code block. It supports a range of diagram types including process flows, circular/feedback loops, side-by-side comparisons, mindmaps, sequence diagrams, and state diagrams, each with guidance on when to use it and which features apply. Its distinctive value is a set of critical syntax rules that head off the most common parse errors: avoiding the "Unsupported markdown: list" error caused by `number. space` patterns (offering circled numbers, parentheses, or prefixes as fixes), correct subgraph ID-plus-display-name naming, referencing nodes by ID rather than display text, safe handling of special characters, and correct arrow types. A companion reference expands this into a comprehensive guide covering node shapes, nested subgraphs, connections, styling and color patterns, layout directions, and reusable advanced patterns like swimlanes, hub-and-spoke, and decision trees.

It targets writers, presenters, educators, and developers — particularly Obsidian users — who want to turn concepts and processes into diagrams without fighting Mermaid's parser. It is purely content-generation guidance with no code execution or system access.