Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Generate production-quality SVG technical diagrams (architecture, flowchart, UML, ER, sequence, etc.) with 7 built-in styles. Export as SVG+PNG via @resvg/resvg-js.
npx claudepluginhub theglitchking/the-joy-of-diagramingGet or set the the-joy-of-diagraming update policy (auto | nudge | off)
Re-run the skill linker — refresh symlinks from node_modules into .claude/skills/
Show installed version, latest available version, current update policy, and hook registration state
Update the-joy-of-diagraming to the latest version (runs npm update + re-links skills)
Share bugs, ideas, or general feedback.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
20 SEO/GEO skills and 5 commands on one shared contract for keyword research, content creation, technical audits, schema markup, monitoring, quality gates, entity truth, and campaign memory.
Complete collection of battle-tested Claude Code configs from an Anthropic hackathon winner - agents, skills, hooks, and rules evolved over 10+ months of intensive daily use
Comprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.
Tools to maintain and improve CLAUDE.md files - audit quality, capture session learnings, and keep project memory current.
Unity Development Toolkit - Expert agents for scripting/refactoring/optimization, script templates, and Agent Skills for Unity C# development
Bash Loop operating mode for Claude Code - action over explanation, tight feedback loops, intelligent context preservation, and graceful subagent control
Autonomous loop engine with orchestrated subagents, DAG-based task execution, context persistence across iterations, and intelligent failure recovery with circuit breaker
Persistent markdown-based planning with task directories, progress tracking, and context engineering for multi-step Claude Code workflows
Eliminate context rot in Claude Code with intelligent memory hierarchy, auto-learning hooks, and specialized subagents. 8-layer architecture with SessionStart/End hooks and MCP knowledge base.
Polyglot progressive linting for monorepos — adapter-driven baselines, per-app drift detection, and idempotent skips. Supports JavaScript/TypeScript (ESLint, Biome), Python (Ruff), Go (golangci-lint), Rust (Clippy), Terraform/OpenTofu (tflint), and Ansible (ansible-lint).
Stop drawing diagrams by hand. Describe your system in English or Chinese — get publication-ready SVG + PNG technical diagrams in seconds.
the-joy-of-diagraming turns natural language descriptions into polished SVG diagrams, then exports them as high-resolution PNG via @resvg/resvg-js. It ships with 7 visual styles and deep knowledge of AI/Agent domain patterns (RAG, Agentic Search, Mem0, Multi-Agent, Tool Call flows), plus full support for all 14 UML diagram types.
User: "Generate a Mem0 memory architecture diagram, dark style"
→ Skill classifies: Memory Architecture Diagram, Style 2
→ Generates SVG with swim lanes, cylinders, semantic arrows
→ Exports 1920px PNG
→ Reports: mem0-architecture.svg / mem0-architecture.png
All samples exported at 1920px width (2× retina) via
@resvg/resvg-js. PNG is lossless and the right choice for technical diagrams — sharp edges, no JPEG compression artifacts on text/lines.
Mem0 Memory Architecture — white background, semantic arrows, layered memory system

Tool Call Flow — dark background, neon accents, monospace font

Microservices Architecture — deep blue background, grid lines, cyan strokes

Agent Memory Types — minimal white, single accent color

Multi-Agent Collaboration — dark gradient background, frosted glass cards

System Architecture — warm cream background (#f8f6f3), Anthropic brand colors, clean professional aesthetic

API Integration Flow — pure white background, OpenAI brand palette, modern minimalist design

Use prompts like these when you want the model to stay close to the repo's strongest regression-tested outputs:
Draw a Mem0 memory architecture diagram in style 1 (Flat Icon).
Use four horizontal sections: Input Layer, Memory Manager, Storage Layer, Output / Retrieval.
Include User, AI App / Agent, LLM, mem0 Client, Memory Manager, Vector Store, Graph DB, Key-Value Store, History Store, Context Builder, Ranked Results, Personalized Response.
Use semantic arrows for read, write, control, and data flow. Keep the layout clean and product-doc friendly.
Draw a tool call flow diagram in style 2 (Dark Terminal).
Show User query, Retrieve chunks, Generate answer, Knowledge base, Agent, Terminal, Source documents, and Grounded answer.
Use terminal chrome, neon accents, monospace typography, and semantic arrows for retrieval, synthesis, and embedding update.
Draw a microservices architecture diagram in style 3 (Blueprint).
Create numbered engineering sections like 01 // EDGE, 02 // APPLICATION SERVICES, 03 // DATA + EVENT INFRA, 04 // OBSERVABILITY.
Include Client Apps, API Gateway, Auth / Policy, three services, Event Router, Postgres, Redis Cache, Warehouse, and Metrics / Traces.
Use blueprint grid, cyan strokes, and a bottom-right title block.
Draw an agent memory types diagram in style 4 (Notion Clean).
Compare Sensory Memory, Working Memory, Episodic Memory, Semantic Memory, and Procedural Memory around a central Agent core.
Use a minimal white layout, neutral borders, one accent color for arrows, and short storage tags for each memory type.
Draw a multi-agent collaboration diagram in style 5 (Glassmorphism).
Use three sections: Mission Control, Specialist Agents, and Synthesis.
Include User brief, Coordinator Agent, Research Agent, Coding Agent, Review Agent, Shared Memory, Synthesis Engine, and Final response.
Use frosted cards, soft glow, and semantic arrows for delegation, shared memory writes, and synthesis output.