d2-diagram-creator — Claude Code skill: D2 diagrams, install
A skill that walks the agent through D2 diagram work and switches on when you mention d2. Useful when the diagram lives in the repo next to the code.
npx skills add jeremylongshore/tons-of-skills-marketplace --skill d2-diagram-creator -a claude-codeWhat d2-diagram-creator does
Say “d2 diagram creator” or just “d2” in a request and the skill picks up from there. It gives the agent a sequence to follow: work through the task, produce configurations, check the output.
There is no renderer bundled in. What you get is a procedure plus a troubleshooting table for invalid configuration fields, a missing tool and permission errors. Your development environment has to be set up and the tools the job needs have to be installed already, because the skill installs nothing for you. Its tool access is limited to Read, Write, Edit, Grep and Bash(cmd:*).
Its category is visual content: diagrams, charts, presentations. Teams that keep architecture drawings in version control get the most out of it, since the agent works on the same files you do.
What it helps with
- draft a D2 diagram for a service architecture
- keep diagrams in the same repo as the code
- get step-by-step guidance on a diagramming task
- validate diagram configuration before generating output
- diagnose a missing tool or permission error
Example prompts for the agent
- Use d2 diagram creator to map the order flow
- I need help with d2 diagram creator for a component diagram
- Check the d2 configuration before you build the diagram
How to install d2-diagram-creator
1Skills CLI (Vercel)
npx skills add jeremylongshore/tons-of-skills-marketplace --skill d2-diagram-creator -a claude-code2Manually: put the files in place
~/.claude/skills/d2-diagram-creator/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/d2-diagram-creator/
1Skills CLI (Vercel)
npx skills add jeremylongshore/tons-of-skills-marketplace --skill d2-diagram-creator -a codex2Manually: put the files in place
.agents/skills/d2-diagram-creator/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add jeremylongshore/tons-of-skills-marketplace --skill d2-diagram-creator -a cursor2Manually: put the files in place
.cursor/skills/d2-diagram-creator/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install jeremylongshore/tons-of-skills-marketplace d2-diagram-creator2Manually: put the files in place
.github/skills/d2-diagram-creator/SKILL.md1Skills CLI (Vercel)
npx skills add jeremylongshore/tons-of-skills-marketplace --skill d2-diagram-creator -a gemini-cli2Platform CLI
gemini skills install https://github.com/jeremylongshore/tons-of-skills-marketplace --path skills/18-visual-content/d2-diagram-creatorManually: put the files in place
.devin/skills/d2-diagram-creator/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add jeremylongshore/tons-of-skills-marketplace --skill d2-diagram-creator -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about d2-diagram-creator
How do I install d2-diagram-creator in Claude Code?
Run npx skills add jeremylongshore/tons-of-skills-marketplace --skill d2-diagram-creator -a claude-code. The skill file then sits at ~/.claude/skills/d2-diagram-creator/SKILL.md.
What does d2-diagram-creator do?
It guides the agent through D2 diagram tasks: outlining the steps, generating configurations and validating the result. Mentioning d2 in a prompt is enough for it to activate.
What do I need before using it?
A configured development environment and access to the tools the task requires. The skill itself may only read, write, edit, search and run commands through Bash(cmd:*).
Source text
SKILL.md · MIT
--- name: d2-diagram-creator description: 'Create d2 diagram creator operations. Auto-activating skill for Visual Content. Triggers on: d2 diagram creator, d2 diagram creator Part of the Visual Content skill category. Use when working with d2 diagram creator functionality. Trigger with phrases like "d2 diagram creator", "d2 creator", "d2". ' allowed-tools: Read, Write, Edit, Bash(cmd:*), Grep version: 1.0.0 license: MIT author: Jeremy Longshore <[email protected]> tags: - design - content compatibility: Designed for Claude Code --- # D2 Diagram Creator ## Overview This skill provides automated assistance for d2 diagram creator tasks within the Visual Content domain. ## When to Use This skill activates automatically when you: - Mention "d2 diagram creator" in your request - Ask about d2 diagram creator patterns or best practices - Need help with visual content skills covering diagrams, charts, presentations, and visual documentation tools. ## Instructions 1. Provides step-by-step guidance for d2 diagram creator 2. Follows industry best practices and patterns 3. Generates production-ready code and configurations 4. Validates outputs against common standards ## Examples **Example: Basic Usage** Request: "Help me with d2 diagram creator" Result: Provides step-by-step guidance and generates appropriate configurations ## Prerequisites - Relevant development environment configured - Access to necessary tools and services - Basic understanding of visual content concepts ## Output - Generated configurations and code - Best practice recommendations - Validation results ## Error Handling | Error | Cause | Solution | |-------|-------|----------| | Configuration invalid | Missing required fields | Check documentation for required parameters | | Tool not found | Dependency not installed | Install required tools per prerequisites | | Permission denied | Insufficient access | Verify credentials and permissions | ## Resources - Official documentation for related tools - Best practices guides - Community examples and tutorials ## Related Skills Part of the **Visual Content** skill category. Tags: diagrams, mermaid, charts, visualization, presentations
© Jeremy Longshore · MIT · jeremylongshore/tons-of-skills-marketplace
