documenting-with-diagrams

What problem does it solve?

This Skill solves the problem of unclear technical Markdown documentation that requires visual diagrams to explain architecture, workflows, state transitions, and data relationships, eliminating the guesswork of selecting the correct Mermaid diagram type and structure for each use case.

Core Features & Use Cases

• Intelligent Diagram Type Matching: Automatically maps your documentation question to the appropriate Mermaid diagram type (e.g., flowcharts for dependency mapping, sequence diagrams for interaction flows, state diagrams for state transitions) to maximize clarity.
• Approval-Gated Generation Workflow: Guides you through a structured 7-step process to plan diagram inventory, get explicit user approval before writing any files, and generate consistent, well-formatted diagram Markdown files to avoid wasted work.
• Built-in Reference Support: Includes ready-to-use references for Mermaid CLI flags, common quirks, and real-world walkthroughs of simple, complex, and trivial diagramming scenarios to speed up implementation.
• Use Case: When documenting a new checkout service, use this Skill to generate an aligned set of diagrams including an overview layer boundary diagram, payment state diagram, and API interaction sequence diagram, all approved by your team before being written to disk.

Quick Start

Use the documenting-with-diagrams skill to generate a set of approved Mermaid diagrams for the user authentication module, including an overview layer boundary diagram and a login sequence diagram, saved to the module's diagrams directory.