Generate visualizations, diagrams, and charts for Medium articles and technical documentation
Generate professional visualizations for your articles and docs. Creates Mermaid diagrams, data charts, and hero images automatically from your content or themes.
/plugin marketplace add seth-schultz/orchestr8/plugin install orchestr8@orchestr8[article-path-or-theme] [--type=all|diagrams|charts|hero]Automatically generate professional visualizations including Mermaid diagrams, data charts, token usage comparisons, and hero images for Medium articles and technical documentation.
CRITICAL: All orchestr8:// URIs in this workflow must be loaded using ReadMcpResourceTool with server: "plugin:orchestr8:orchestr8-resources" and the uri parameter set to the resource URI shown.
For detailed instructions and examples, load: orchestr8://guides/mcp-resource-loading
# Generate all visualizations for a Medium article
/orchestr8:generate-visualizations medium/article.md
# Generate specific visualization types
/orchestr8:generate-visualizations medium/article.md --type=diagrams
/orchestr8:generate-visualizations medium/article.md --type=charts
/orchestr8:generate-visualizations medium/article.md --type=hero
# Generate from theme/topic
/orchestr8:generate-visualizations "AI optimization and token management"
# Generate for project documentation
/orchestr8:generate-visualizations . --type=diagrams
→ Load Agent: orchestr8://agents/visualization-specialist
Activities:
Outputs:
Success Criteria:
→ Checkpoint: Analysis complete, visualization plan ready
→ Load: orchestr8://skills/mermaid-diagram-generation
Parallel Tracks:
For technical content or code projects:
Output Format:
<!-- Saved to: medium/diagrams/[type]-[description].md -->
# [Diagram Title]
**Purpose**: [What this diagram shows]
**Context**: [When to reference this diagram]
```mermaid
[Mermaid diagram code]
Key Points:
**Color Standards:**
- Blue (#1168bd): Internal systems/components
- Gray (#999999): External systems
- Green (#2d7a3e): Databases/persistence
- Red (#d9534f): Cache layers
- Orange (#f0ad4e): Message queues
- Light Blue (#5bc0de): User interfaces
**Success Criteria:**
- ✅ Diagrams render correctly in Mermaid
- ✅ Appropriate level of detail (not too complex)
- ✅ Clear labels and relationships
- ✅ Consistent color scheme
- ✅ Saved to organized directory structure
**→ Checkpoint:** Mermaid diagrams generated and validated
## Phase 3: Data Chart Generation (45-70%)
**→ Load:** orchestr8://skills/data-chart-generation
**Chart Types:**
### Performance Comparisons
- Token usage before/after
- Cost comparison charts
- Speed/latency improvements
- Memory usage reduction
### Metrics Visualization
- Time series data (usage over time)
- Distribution charts (load distribution)
- Comparison bars (method A vs method B)
- Pie charts (resource allocation)
**Technology Options:**
1. **Matplotlib + Python** (Best for complex charts)
```python
python scripts/generate-chart.py \
--type comparison \
--data "Before: 200000, After: 5000" \
--title "Token Usage Reduction" \
--output medium/images/
Chart.js + Node (Web-ready, interactive)
node scripts/generate-chart.js \
--type bar \
--data data.json \
--output medium/images/chart.png
Mermaid Charts (Simple, markdown-native)
%%{init: {'theme':'base'}}%%
pie title Token Distribution
"Loaded Upfront" : 200000
"Loaded On-Demand" : 5000
Output Requirements:
Success Criteria:
→ Checkpoint: Charts generated and verified
→ Load: orchestr8://skills/screenshot-automation
Screenshot Types:
Technology Options:
Playwright for Web Screenshots
python scripts/screenshot.py \
--url "https://mermaid.live/view?code=[encoded]" \
--output medium/images/architecture.png
Carbon for Code Screenshots
python scripts/code-screenshot.py \
--file src/example.ts \
--theme monokai \
--output medium/images/code-example.png
Mermaid CLI for Diagram Renders
mmdc -i diagram.mmd -o medium/images/diagram.png -w 1920 -b transparent
Success Criteria:
→ Checkpoint: Screenshots captured and optimized
→ Load: orchestr8://skills/medium-hero-image-generation
Activities:
Command:
python scripts/generate-hero-image.py \
--file medium/article.md \
--method dalle \
--update
Success Criteria:
→ Checkpoint: Hero image generated and integrated
Activities:
medium/
├── article.md
├── images/
│ ├── hero.png
│ ├── token-comparison-chart.png
│ ├── architecture-diagram.png
│ └── code-screenshot.png
└── diagrams/
├── system-context.md
├── data-flow.md
└── sequence-api-auth.md
Create medium/diagrams/README.md:
# Visualizations for [Article Title]
## Diagrams
- [System Context](system-context.md) - High-level architecture
- [Data Flow](data-flow.md) - Information movement
- [API Sequence](sequence-api-auth.md) - Authentication flow
## Charts
- 
- 
## Hero Image
- 
Add image references in article markdown:

*Figure 1: System architecture showing dynamic resource loading*

*Figure 2: 97% reduction in token usage*
Create medium/VISUALIZATIONS.md:
# Visualization Generation Report
**Article**: [Title]
**Generated**: [Date]
## Generated Visualizations
### Diagrams (Mermaid)
- ✅ System Context Diagram
- ✅ Data Flow Diagram
- ✅ Sequence Diagram (API Authentication)
### Charts
- ✅ Token Usage Comparison (97% reduction)
- ✅ Cost Comparison (40x savings)
### Screenshots
- ✅ Code Example: TypeScript implementation
- ✅ Architecture render
### Hero Image
- ✅ Generated with DALL-E 3
- ✅ Theme: AI optimization and dynamic loading
- ✅ Resolution: 1920x1080
- ✅ Frontmatter updated
## Usage in Article
All visualizations referenced in article with proper captions and alt text.
## Next Steps
- [ ] Review all visualizations for accuracy
- [ ] Verify rendering in Medium preview
- [ ] Optimize any oversized images
- [ ] Proceed with publishing workflow
Success Criteria:
→ Checkpoint: Visualizations integrated and documented
✅ Diagram Quality
✅ Chart Quality
✅ Screenshot Quality
✅ Hero Image Quality
✅ Integration
# Generate all visualizations for AI optimization article
/orchestr8:generate-visualizations medium/2025-11-11-ai-memory-optimization.md
# Output:
# - medium/images/hero.png (AI-generated hero image)
# - medium/images/token-comparison.png (Chart showing 97% reduction)
# - medium/images/architecture.png (System diagram)
# - medium/diagrams/system-context.md (C4 Level 0)
# - medium/diagrams/data-flow.md (Resource loading flow)
# Generate architecture diagrams for project
/orchestr8:generate-visualizations . --type=diagrams
# Output:
# - .orchestr8/docs/diagrams/architecture-system-context.md
# - .orchestr8/docs/diagrams/architecture-containers.md
# - .orchestr8/docs/diagrams/dataflow-resource-loading.md
# - .orchestr8/docs/diagrams/sequence-fuzzy-matching.md
# Generate visualizations for specific theme
/orchestr8:generate-visualizations "token usage optimization and caching"
# Output:
# - Token usage comparison charts
# - Caching strategy diagrams
# - Performance improvement visualizations
# AI Image Generation
export OPENAI_API_KEY="..." # For DALL-E 3
export REPLICATE_API_TOKEN="..." # For Stable Diffusion
# Screenshot Automation
export CARBON_API_KEY="..." # For code screenshots (optional)
# Chart Generation
export CHART_THEME="professional" # professional, minimal, vibrant
export CHART_DPI="300" # Output DPI for charts
# For Medium articles
medium/
├── images/ # All raster images (PNG, JPG)
└── diagrams/ # All Mermaid diagrams (.md files)
# For project documentation
.orchestr8/docs/
└── diagrams/ # All project diagrams
Related Resources: