From architect
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.
npx claudepluginhub navraj007in/architecture-cowork-plugin --plugin architectThis skill uses the workspace's default tool permissions.
Convert all Mermaid diagrams in your architecture blueprint to **presentation-quality PNG images**.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Convert all Mermaid diagrams in your architecture blueprint to presentation-quality PNG images.
Perfect for: Stakeholder presentations, documentation, design reviews, Confluence/Notion embedding
Use this skill when you need to:
Input: Architecture blueprint (markdown file with Mermaid diagrams)
Output: diagrams/ folder with PNG files
The tool extracts and renders these diagram types from blueprints:
File naming: architecture-container.png, architecture-component.png, deployment.png
File naming: database-erd.png, multi-tenancy.png
File naming: sequence-auth.png, sequence-api.png, sequence-realtime.png, sequence-payment.png
File naming: flow-user-journey.png, flow-data.png
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
Rendering settings:
If mermaid-cli not available, use Kroki public API:
# Encode diagram to base64
DIAGRAM=$(echo 'graph TD; A-->B' | base64)
# Fetch PNG from Kroki
curl https://kroki.io/mermaid/png/$DIAGRAM -o diagram.png
Fallback strategy: Try Mermaid CLI first, fallback to Kroki if CLI not installed.
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)
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.
When invoked, generate:
📊 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
Optional parameters (ask user if they want to customize):
Default behavior: PNG, 1600px width, default theme, transparent background.
All exported diagrams must meet these standards:
/architect:blueprint first?"Run /architect:export-diagrams first to generate PNGs that downstream documentation can embed.
Run /architect:export-diagrams to create diagrams for the exported document.
/architect:blueprint:Run /architect:export-diagrams to generate visual assets immediately.
# After generating blueprint
/architect:export-diagrams
# Output:
# ✅ Created diagrams/ with 6 PNG files
# Ready for presentations!
/architect:export-diagrams --format=svg --width=2000 --theme=dark
# Output:
# ✅ Created diagrams/ with 6 SVG files (2000px, dark theme)
/architect:export-diagrams --dpi=300 --background=white
# Output:
# ✅ Created diagrams/ with 6 PNG files (300 DPI, print-ready)
#!/bin/bash
# Extract Mermaid blocks from blueprint and render each
BLUEPRINT="blueprint.md"
OUTPUT_DIR="diagrams"
mkdir -p "$OUTPUT_DIR"
# Extract each mermaid block and render
# (Actual implementation would parse markdown and extract blocks)
# Example rendering command:
mmdc -i temp-diagram.mmd \
-o "$OUTPUT_DIR/architecture-container.png" \
-w 1600 \
-b transparent \
-t default
#!/bin/bash
# Encode diagram and fetch from Kroki
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
// Pseudocode for extracting diagrams from blueprint
function extractDiagrams(blueprint: string) {
const diagrams = [];
// Parse markdown, extract code blocks with ```mermaid
const mermaidBlocks = extractMermaidCodeBlocks(blueprint);
for (const block of mermaidBlocks) {
const context = getSectionContext(block); // "Architecture Diagram", "Database Schema", etc.
const type = detectDiagramType(block.code); // graph, sequenceDiagram, erDiagram, etc.
const filename = generateFilename(context, type); // "architecture-container.png"
diagrams.push({
code: block.code,
filename: filename,
context: context,
type: type
});
}
return diagrams;
}
A successful diagram export should:
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.