prp-diagram

Generate mermaid diagrams visualizing a plan's data model, architecture, and flows.

2.2k|608|Updated Jun 21, 2025
One-click install
npx skills add https://github.com/Wirasm/PRPs-agentic-eng --skill prp-diagram
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prp-diagram
Source: https://github.com/Wirasm/PRPs-agentic-eng/tree/main/plugins/prp-core/skills/prp-diagram
Command: npx skills add https://github.com/Wirasm/PRPs-agentic-eng --skill prp-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reading a dense implementation plan as plain text makes it hard to grasp the data model, architecture, and key flows at a glance. This Skill produces a mermaid-only visual supplement so a human can absorb a plan's structure quickly.

Core Features & Use Cases

  • Mermaid Diagram Generation: Creates erDiagram, classDiagram, flowchart, sequenceDiagram, and stateDiagram-v2 visuals based strictly on what the plan actually describes.
  • Automatic Output Placement: Writes a <plan-basename>.diagrams.md file next to the plan (or into the PRP store's plans directory), overwriting on re-run since the plan is the source of truth.
  • Optional HTML Output: When explicitly requested, produces a self-contained .diagrams.html file with <pre class="mermaid"> blocks and no embedded scripts.
  • Use Case: After generating an implementation plan for a new feature, run this Skill to produce ER diagrams of the schema changes and a sequence diagram of the request flow for reviewers.

Quick Start

Ask the AI to diagram the most recent plan, or pass a path such as "diagram this plan at plans/feature-auth.md" to generate its mermaid visual supplement.

Frequently Asked Questions about prp-diagram

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

FAQPage Schema
How do I generate mermaid diagrams from an implementation plan?▼

Invoke the Skill with a path to your plan markdown file, or leave the argument blank to use the most recent plan in the PRP store. It reads the plan and writes a .diagrams.md file containing only mermaid diagrams with captions.

What diagram types can mermaid generate for a plan?▼

The Skill produces erDiagram or classDiagram for data models, flowchart for architecture changes, sequenceDiagram for key flows, and stateDiagram-v2 for lifecycle rules. It only creates diagram types the plan's content actually supports.

Can I get an HTML version of the plan diagrams?▼

Yes, but only when you explicitly ask for .html output. The Skill writes a self-contained .diagrams.html file with a title and <pre class="mermaid"> blocks, without embedding mermaid.js since the consuming UI provides the renderer.

Where are the generated diagram files saved?▼

If the plan lives inside the PRP store, the diagram file is written next to it. Otherwise it goes into the store's plans directory. Re-running overwrites the file since the plan remains the source of truth.

Why does my diagram output skip some diagram categories?▼

The Skill only diagrams what the plan actually contains and never invents entities, flows, or states. If the plan has no data-model changes or lifecycle rules, those diagram categories are intentionally skipped.