skills.rest
zacjones93
zacjones93COMMUNITY
Explore all skills by this author →
Website𝕏@zacjones93GitHub

diagram

Create and update Unified Impact Diagrams with Mermaid syntax and DDD principles.

Updated Nov 13, 2025
Search Tags:#architecture#documentation#software development#mermaid#ddd#user journey#diagrams
One-click install
npx skills add https://github.com/zacjones93/pokidex --skill diagram
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram
Source: https://github.com/zacjones93/pokidex/tree/main/.claude/skills/diagram
Command: npx skills add https://github.com/zacjones93/pokidex --skill diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill bridges the gap between technical implementation and user value by creating and maintaining "Unified Impact Diagrams." It ensures that all technical decisions are explicitly linked to user benefits, making complex systems understandable for all stakeholders and preventing outdated documentation.

Core Features & Use Cases

  • Diagram Driven Development (DDD): Follows a methodology to create diagrams that always show Front-Stage (user experience) and Back-Stage (technical implementation) with clear impact annotations.
  • Create & Update Diagrams: Generate new diagrams for features, architectures, user journeys, and refactorings, and keep existing ones synchronized with code changes.
  • Audit & Organize: Regularly check diagram quality, coverage, and organization to maintain a single source of truth for system understanding.
  • Use Case: "Create a new feature diagram for the user authentication flow, ensuring it highlights security impacts and error recovery paths, following DDD principles."

Quick Start

Create a new sequence diagram for the user onboarding journey, showing both the user's steps and the backend services involved, with impact annotations.

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 connect technical implementation to user value?▼

Create unified impact diagrams using Diagram Driven Development (DDD) principles: map user-facing features (Front-Stage) alongside backend systems (Back-Stage) with explicit impact annotations. This ensures all technical decisions link directly to user benefits and remain synchronized with code changes.

What is Diagram Driven Development and why should I use it?▼

DDD is a methodology that enforces two-stage diagrams separating user experience from technical implementation, with mandatory impact annotations. It prevents documentation decay by making diagrams the source of truth for how features deliver user value across your architecture.

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

Maintain diagrams in a centralized repository with Last Updated metadata and Change History tracking. Audit diagrams regularly against code, update before/after scenarios with #90EE90 highlighting, and follow consistent Mermaid syntax and naming conventions to stay in sync.

Can I use Mermaid diagrams for user journeys and system architecture together?▼

Yes. Mermaid supports sequence, architecture, and journey diagram types. Use the same DDD framework for all: show user steps and backend services in journeys, and map feature flows to technical components in architecture diagrams with clear impact labels.

What diagram types does this cover for software development?▼

This covers feature diagrams, architecture diagrams, user journey maps, test flows, and refactoring scenarios—all using Mermaid syntax. Each enforces Front-Stage/Back-Stage separation and impact annotations to document how technical decisions serve user value.

Do I need to reorganize existing diagrams to follow these conventions?▼

Yes. Audit existing diagrams for DDD compliance: verify two-stage structure, add impact annotations, enforce naming conventions, confirm Mermaid syntax, and organize them in a single repository. This creates a consistent source of truth for system understanding.

Related Skills

Explore More Software Engineering Skills→
alexanderopalexanderop
10

c4-architecture

Generate C4 context, container, component, deployment, and dynamic diagrams in Mermaid syntax.

Community
Advanced
russell-lubojackyrussell-lubojacky

pdf-analyzer

Extract PDF text and convert diagrams to Mermaid code.

Community
Basic
nimadorostkarnimadorostkar
25

diagrams

Generate Mermaid diagrams as code for version-controlled documentation.

Community
Intermediate
cosmixcosmix
53

diagramming

Convert textual system descriptions into Mermaid diagrams.

Community
Basic