skills.rest
johnlindquist
johnlindquistCOMMUNITY
Explore all skills by this author →
Website𝕏@johnlindquistGitHub

diagram

Create and update Unified Impact Diagrams mapping user value to technical implementation.

16|4|Updated Nov 10, 2025
Search Tags:#architecture#documentation#ddd#visualization#diagram#user-value
One-click install
npx skills add https://github.com/johnlindquist/claude-workshop-skills --skill diagram-johnlindquist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram
Source: https://github.com/johnlindquist/claude-workshop-skills/tree/main/skills/diagram
Command: npx skills add https://github.com/johnlindquist/claude-workshop-skills --skill diagram-johnlindquist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams maintain Unified Impact Diagrams that map user value to technical decisions, ensuring diagrams stay synchronized with code and architecture.

Core Features & Use Cases

  • Create Diagrams: Generate new diagrams for features, architecture, journeys, tests, and refactoring.
  • Update Diagrams: Keep diagrams in sync with code changes and improvements.
  • Audit & Organize: Regularly audit diagram quality and maintain clean structure.
  • Use Case: When implementing a new feature, generate a diagram to illustrate user value and back-stage components, then keep it updated as design evolves.

Quick Start

Use the diagram skill to initialize ai/diagrams and create your first diagram following the DDD principles.

Frequently Asked Questions about diagram

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

FAQPage Schema
How do I create diagrams that map user value to technical implementation?▼

Unified Impact Diagrams connect user value to back-stage technical decisions using Diagram Driven Development (DDD) principles. Create diagrams for features, architecture, or journeys, then keep them synchronized with code changes as your design evolves.

What is Diagram Driven Development and why use it for documentation?▼

DDD maintains diagrams as living documentation that bridges user impact to implementation details. It enforces Mermaid patterns, color rules, and comprehensive file references, ensuring diagrams stay accurate and audit-ready alongside your codebase.

How do I keep architecture diagrams synchronized with code changes?▼

Audit and update diagrams regularly as your code and design evolve. The diagram Skill tracks front-stage user flows and back-stage components with impact annotations and error paths, so your documentation reflects current implementation.

Can I use diagrams to document both user journeys and error paths?▼

Yes. Diagrams cover user-value traces, front-stage and back-stage mappings, and error paths. This comprehensive approach documents how features deliver value and how systems handle failures.

What's the best way to organize and audit diagrams across a project?▼

Use the ai/diagrams workspace to create, index, and organize diagrams with proper naming and documentation. Regular audits maintain diagram quality and ensure all related files are properly referenced and documented.

Related Skills

Explore More Software Engineering Skills→
fefogarciafefogarcia
1

c4-architecture

Generate C4 model diagrams in Mermaid syntax for architecture documentation.

Community
Intermediate
devopstalesdevopstales
1

documentation-and-adrs

Generate README files, inline code documentation, and architectural decision records.

Community
Advanced
ReefBytes-OwnerReefBytes-Owner
1

docs-diagrams

Generate Mermaid architecture diagrams from a codebase with validation notes.

Community
Intermediate
MCERQUAMCERQUA
1

chart-builder

Create and edit node-and-edge charts with server-side storage.

Community
Advanced