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.
Exports Mermaid diagrams from architecture blueprints as presentation-ready PNG images.
npx claudepluginhub navraj007in/architecture-cowork-pluginThis skill inherits all available tools. When active, it can use any tool Claude has access to.
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:
/architect:stakeholder-doc or /architect:export-docxInput: 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 `/architect:stakeholder-doc`
- 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?"/architect:stakeholder-doc:Run /architect:export-diagrams first to generate PNGs that stakeholder-doc can embed.
/architect:export-docx:Run /architect:export-diagrams to create diagrams for Word 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.
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.