Draw ASCII diagrams to explain code, systems, and data flows.
npx skills add https://github.com/mikker/dotfiles --skill diagram-first
Please help me install this Agent Skill. Skill: diagram-first Source: https://github.com/mikker/dotfiles/tree/main/agents.symlink/skills/diagram-first Command: npx skills add https://github.com/mikker/dotfiles --skill diagram-first
Diagram-first explanations using ASCII visualizations (sequence diagrams, flowcharts, component maps) to explain code, systems, request/response flows, pipelines, concurrency, and comparisons. Use when the user asks to "draw an ASCII diagram", "show the flow/logic", "visualize the architecture", "explain how it works", or when a diagram would reduce ambiguity in a technical explanation.
Provide an ASCII diagram first to illustrate the requested concept, then follow with a concise explanation.
High-intent search queries and answers about installing and using this skill.
You can visualize system architecture by drawing ASCII component maps and flowcharts directly in text. This approach presents the visual structure upfront to reduce ambiguity when explaining code, distributed systems, and data flows.
Drawing an ASCII sequence diagram is a concise way to visualize API request and response interactions. It maps sequential or parallel component communications upfront, followed by a brief textual explanation of the logic.
Yes, ASCII flowcharts can explain code logic and pipelines by mapping out state machines and data transformations visually. Presenting the diagram first provides immediate clarity on the flow before detailing the concise textual breakdown.
Use ASCII diagrams instead of prose when explaining flows, architectures, or logic where visual structure reduces ambiguity. Diagrams are ideal for side-by-side comparisons and illustrating concurrency across distributed components.
Create a component map for a distributed system by drawing an ASCII diagram that illustrates the relationships and interactions between parallel or distributed components. Follow the visual map with a concise explanation of the system architecture.
tiankong0101-byteGenerates diagrams and charts from textual descriptions as Mermaid output.
ncksolConvert PlantUML diagrams into ASCII art for terminal-friendly viewing.
vuthuonghai-steveGenerates UML Sequence Diagrams in Mermaid syntax from codebase analysis.
diegocanepaGenerate flowcharts, sequence diagrams, and class diagrams from Mermaid syntax.
