skills.rest
cameronsjo
cameronsjoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

pretty-diagrams

Convert conversational requests into Mermaid diagrams for documentation and architecture visuals.

Updated Aug 27, 2026
Search Tags:#architecture#mermaid#rendering#flowchart#sequence#diagrams#ascii
One-click install
npx skills add https://github.com/cameronsjo/dev-toolkit --skill pretty-diagrams
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretty-diagrams
Source: https://github.com/cameronsjo/dev-toolkit/tree/main/skills/pretty-diagrams
Command: npx skills add https://github.com/cameronsjo/dev-toolkit --skill pretty-diagrams

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mermaid diagrams are essential for visualizing software architecture and workflows in docs and notes, but crafting clean, correctly formatted diagrams from plain text is error-prone and time-consuming.

Core Features & Use Cases

  • Write clean Mermaid markup that renders natively in GitHub and Obsidian.
  • Audit and fix legacy Mermaid syntax, simplify complex diagrams, and convert diagrams to ASCII or themed SVG when requested.
  • Use cases include architecture diagrams, flowcharts, sequences, state machines, class diagrams, and ER diagrams, plus cleaning up existing diagrams in a codebase.

Quick Start

Tell me the Mermaid diagram you want and I will generate the markup and render it as needed.

Frequently Asked Questions about pretty-diagrams

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

FAQPage Schema
How do I generate Mermaid diagrams from plain text?▼

To generate Mermaid diagrams from text, this Skill converts conversational requests directly into validated Mermaid markup. It produces well-formed syntax for flowcharts, sequence diagrams, state machines, class diagrams, and ER diagrams suitable for documentation.

Can I render Mermaid diagrams natively in GitHub and Obsidian?▼

Yes, Mermaid diagrams render natively in GitHub and Obsidian. This Skill produces clean markup specifically formatted for these platforms, and can additionally convert your diagrams into themed SVG or ASCII format when requested for broader compatibility.

How do I fix broken legacy Mermaid syntax in my codebase?▼

Fixing broken legacy Mermaid syntax is handled by auditing existing diagram code and correcting formatting errors. This Skill simplifies complex diagrams, validates the syntax, and ensures the updated markup renders correctly within your documentation environment.

What is the best way to convert a Mermaid flowchart to ASCII?▼

The best way to convert a Mermaid flowchart to ASCII is by requesting ASCII rendering during generation. This Skill applies options for ASCII rendering alongside standard SVG output, allowing you to embed text-based diagrams where image formats are unsupported.

Does this support class diagrams and ER diagrams for software architecture?▼

Yes, it supports class diagrams and ER diagrams for software architecture visualization. This Skill handles architecture diagrams, flowcharts, sequences, and state machines, converting your architectural descriptions into validated Mermaid markup.

Related Skills

Explore More Software Engineering Skills→
OKHP3OKHP3
2

mermaid-diagrams

Convert plain text descriptions into Mermaid syntax-based diagrams.

Community
Advanced
odylithodylith
34

odylith-atlas-render

Render Atlas diagrams from Yardl or other sources into Minecraft's Yak? No, Yak is not involved. Actually, reprocess the request: convert Mermaid catalog data to Atlas diagrams and export them as SVG or PNG files for use in documentation and presentations.

Official
Intermediate
majesticlabs-devmajesticlabs-dev
47

mermaid-builder

Generate syntactically valid Mermaid diagrams for flowcharts, sequence, class, state, Gantt, ER, and data lineage.

Official
Advanced
blackcaterblackcater

beautiful-mermaid-diagrams

Generate Mermaid code for flowcharts, sequence, class, ER, and state diagrams.

Community
Intermediate