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.