Skip to main content
export-diagrams Extract and render all Mermaid diagrams from architecture blueprints to PNG images. Creates a diagrams/ folder with high-quality images ready for presentations and documentation.
Aller à l'installation Skills Marketplace Découvrez et explorez les compétences IA créées par la communauté.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Afficher les détails du prompt Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/navraj007in/architecture-cowork-plugin --skill export-diagramsLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Télécharger Zip Téléchargement... Métiers associés
SOC
Basé sur la classification professionnelle SOC
name export-diagrams description Extract and render all Mermaid diagrams from architecture blueprints to PNG images. Creates a diagrams/ folder with high-quality images ready for presentations and documentation.
Diagram Export Tool
Convert all Mermaid diagrams in your architecture blueprint to presentation-quality PNG images .
Perfect for : Stakeholder presentations, documentation, design reviews, Confluence/Notion embedding
When to Use This Skill
Use this skill when you need to:
Generate PNG diagrams for stakeholder presentations
Embed architecture diagrams in documentation (Confluence, Notion, Google Docs)
Create visual assets for pitch decks or investor updates
Share diagrams with teams that don't have Mermaid rendering
Prepare diagrams before running any stakeholder presentation or document export workflow
Input : Architecture blueprint (markdown file with Mermaid diagrams)
Output : diagrams/ folder with PNG files
Diagram Types Extracted
The tool extracts and renders these diagram types from blueprints:
1. Architecture Diagrams
C4 Container Diagram (from Section 5: Architecture Diagram)C4 Component Diagram (if included)Deployment Diagram (from Section 5)
File naming : architecture-container.png, architecture-component.png, deployment.png
2. Database Diagrams
Entity Relationship Diagram (ERD) (from Section 4: Database Schema)Multi-tenancy Isolation Diagram (if B2B product)
File naming : database-erd.png, multi-tenancy.png
3. Sequence Diagrams
Authentication Flow (from Section 8: Security Architecture)API Request Flow (from Section 6: API Specification)Real-time Update Flow (if real-time features detected)Payment Flow (if e-commerce detected) File naming : sequence-auth.png, sequence-api.png, sequence-realtime.png, sequence-payment.png
4. Flow Diagrams
User Journey Flow (if included in blueprint)Data Flow Diagram (if included) File naming : flow-user-journey.png, flow-data.png
How It Works
Step 1: Scan Blueprint for Mermaid Blocks Extract all code blocks with mermaid language identifier:
```mermaid
graph TD
A[User] --> B[Frontend]
B --> C[Backend]
C --> D[Database]
### Step 2: Categorize Diagrams
Identify diagram type based on:
- Section context (Architecture Diagram vs Database Schema vs Security)
- Mermaid syntax (graph, sequenceDiagram, erDiagram, C4Context, etc.)
- Content analysis (keywords like "auth", "payment", "user journey")
### Step 3: Render to PNG
Use **Mermaid CLI** or **Kroki API** to render:
#### Option A: Mermaid CLI (Local Rendering)
```bash
# Install mermaid-cli if not present
npm install -g @mermaid-js/mermaid-cli
# Render each diagram
mmdc -i diagram.mmd -o diagrams/architecture-container.png -w 1600 -H 1200 -b transparent
Width: 1600px (presentation quality)
Height: Auto (maintain aspect ratio, max 1200px)
Background: Transparent
Theme: Default (or extract from blueprint if specified)
Option B: Kroki API (Cloud Rendering) If mermaid-cli not available, use Kroki public API:
DIAGRAM=$(echo 'graph TD; A-->B' | base64 )
curl https://kroki.io/mermaid/png/$DIAGRAM -o diagram.png
Fallback strategy : Try Mermaid CLI first, fallback to Kroki if CLI not installed.
Step 4: Create diagrams/ Folder Structure diagrams/
├── architecture-container.png # Main C4 diagram
├── architecture-component.png # Component details (if exists)
├── deployment.png # Hosting architecture
├── database-erd.png # Entity relationships
├── multi-tenancy.png # Tenant isolation (B2B only)
├── sequence-auth.png # Authentication flow
├── sequence-api.png # API request/response
├── sequence-realtime.png # Real-time updates (if exists)
├── sequence-payment.png # Payment flow (e-commerce only)
├── flow-user-journey.png # User journey (if exists)
└── flow-data.png # Data flow (if exists)
Step 5: Generate Index File Create diagrams/README.md with:
# Architecture Diagrams
Generated from blueprint on [Date]
## High-Level Architecture
*System components and how they connect*
## Database Schema
*Data model and relationships*
## Authentication Flow
*How users authenticate and authorize*
## API Request Flow
*Typical API request lifecycle*
[... additional diagrams ...]
---
**Note** : All diagrams are exported at 1600px width for presentation quality.
To re-generate, run `/architect:export-diagrams` in the project root.
Output Format 📊 Extracting diagrams from blueprint...
✅ Found 8 Mermaid diagrams in blueprint
✅ Categorized diagrams by type
🎨 Rendering diagrams to PNG...
✅ architecture-container.png (1600x890px)
✅ database-erd.png (1600x1120px)
✅ sequence-auth.png (1600x780px)
✅ sequence-api.png (1600x650px)
✅ deployment.png (1600x720px)
✅ multi-tenancy.png (1600x580px)
⚠️ sequence-realtime.png (skipped - no real-time diagram in blueprint)
⚠️ sequence-payment.png (skipped - no payment diagram in blueprint)
📁 Created diagrams/ folder with 6 PNG files
📄 Created diagrams/README.md index
Ready for presentations and documentation!
Next steps:
- Use diagrams in stakeholder presentations, docs, or exported artifacts
- Embed in Confluence/Notion
- Add to pitch decks or investor updates
Customization Options Optional parameters (ask user if they want to customize):
Output format : PNG (default), SVG, PDFWidth : 1600px (default), 1200px, 2000px (for retina displays)Theme : Default, dark, forest, neutralBackground : Transparent (default), white, custom colorDPI : 96 (screen), 300 (print quality) Default behavior : PNG, 1600px width, default theme, transparent background.
Diagram Quality Standards All exported diagrams must meet these standards:
✅ Minimum width : 1200px (readable in presentations)
✅ Aspect ratio preserved : No stretching or distortion
✅ Text readable : Font size ≥12pt when displayed at 1600px
✅ Colors accessible : Sufficient contrast for colorblind viewers
✅ Transparent background : Unless user requests solid color
✅ No truncation : All labels and arrows fully visible
Error Handling
If Mermaid syntax is invalid:
Action : Report which diagram has errors, show Mermaid error messageExample : "⚠️ ERD diagram has syntax error: Expected 'entity' keyword at line 5"Fallback : Skip invalid diagram, continue with others
If Mermaid CLI not installed:
Action : Automatically fallback to Kroki APINotify user : "ℹ️ Using Kroki API for rendering (mermaid-cli not found)"
If diagram is too large (>10MB):
Action : Reduce width to 1200px and retryNotify user : "⚠️ Diagram too large, reduced to 1200px width"
If no diagrams found in blueprint:
Action : Error message with guidanceExample : "❌ No Mermaid diagrams found in blueprint. Did you run /architect:blueprint first?"
Integration with Other Skills
Before generating a stakeholder presentation: Run /architect:export-diagrams first to generate PNGs that downstream documentation can embed.
Before converting markdown to DOCX or PDF: Run /architect:export-diagrams to create diagrams for the exported document.
After running /architect:blueprint: Run /architect:export-diagrams to generate visual assets immediately.
Examples
Example 1: Basic Usage
/architect:export-diagrams
Example 2: Custom Settings /architect:export-diagrams --format=svg --width=2000 --theme=dark
Example 3: Print Quality /architect:export-diagrams --dpi=300 --background=white
Technical Implementation
Mermaid CLI Rendering (Preferred) #!/bin/bash
BLUEPRINT="blueprint.md"
OUTPUT_DIR="diagrams"
mkdir -p "$OUTPUT_DIR "
mmdc -i temp-diagram.mmd \
-o "$OUTPUT_DIR /architecture-container.png" \
-w 1600 \
-b transparent \
-t default
Kroki API Rendering (Fallback) #!/bin/bash
DIAGRAM_CODE="graph TD; A-->B"
ENCODED=$(echo "$DIAGRAM_CODE " | base64 -w 0)
curl "https://kroki.io/mermaid/png/$ENCODED " \
-o "diagrams/diagram.png" \
--silent \
--fail
Diagram Extraction Logic
function extractDiagrams (blueprint : string const diagrams = [];
const mermaidBlocks = extractMermaidCodeBlocks (blueprint);
for (const block of mermaidBlocks) {
const context = getSectionContext (block);
const type = detectDiagramType (block.code );
const filename = generateFilename (context, type );
diagrams.push ({
code : block.code ,
filename : filename,
context : context,
type : type
});
}
return diagrams;
}
Success Criteria A successful diagram export should:
✅ Extract all Mermaid diagrams from blueprint
✅ Render each diagram to high-quality PNG (1600px minimum)
✅ Use descriptive filenames based on diagram purpose
✅ Create diagrams/ folder with organized structure
✅ Generate README.md index with embedded images
✅ Handle errors gracefully (invalid syntax, missing tools)
✅ Provide clear progress and completion messages
✅ Be ready for immediate use in presentations and docs
Files Created diagrams/
├── README.md # Index with embedded images
├── architecture-container.png
├── architecture-component.png # (optional)
├── deployment.png
├── database-erd.png
├── multi-tenancy.png # (if B2B)
├── sequence-auth.png
├── sequence-api.png
├── sequence-realtime.png # (if real-time features)
├── sequence-payment.png # (if e-commerce)
├── flow-user-journey.png # (optional)
└── flow-data.png # (optional)
Total size : Typically 1-5 MB for all diagrams combined.
