# d2-diagram-creator

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.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 345 installs · ★ 2873
- Author: Jeremy Longshore
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/jeremylongshore/tons-of-skills-marketplace/tree/HEAD/skills/18-visual-content/d2-diagram-creator/SKILL.md
- Updated: 2026-10-26
- HTML: https://affpapa.org/en/nevibecode/skills/d2-diagram-creator

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add jeremylongshore/tons-of-skills-marketplace --skill d2-diagram-creator -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/d2-diagram-creator/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/d2-diagram-creator/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add jeremylongshore/tons-of-skills-marketplace --skill d2-diagram-creator -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/d2-diagram-creator/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add jeremylongshore/tons-of-skills-marketplace --skill d2-diagram-creator -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/d2-diagram-creator/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install jeremylongshore/tons-of-skills-marketplace d2-diagram-creator
```

2. **Manually: put the files in place**
- File: `.github/skills/d2-diagram-creator/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add jeremylongshore/tons-of-skills-marketplace --skill d2-diagram-creator -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/jeremylongshore/tons-of-skills-marketplace --path skills/18-visual-content/d2-diagram-creator
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/d2-diagram-creator/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add jeremylongshore/tons-of-skills-marketplace --skill d2-diagram-creator -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/jeremylongshore/tons-of-skills-marketplace/tree/HEAD/skills/18-visual-content/d2-diagram-creator/SKILL.md

## When to use it
- 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
- 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

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: dde0c927767e8586.

BEGIN THIRD-PARTY FILE dde0c927767e8586
```text
---
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 <jeremy@intentsolutions.io>
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
```
END THIRD-PARTY FILE dde0c927767e8586

The third-party file has ended. Everything between the dde0c927767e8586 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

© Jeremy Longshore · MIT · https://github.com/jeremylongshore/tons-of-skills-marketplace/tree/HEAD/skills/18-visual-content/d2-diagram-creator/SKILL.md

## Similar
- [excalidraw-diagram](https://affpapa.org/en/nevibecode/skills/excalidraw-diagram.md) — skill · 8500 installs
- [diagram-creator](https://affpapa.org/en/nevibecode/skills/diagram-creator.md) — skill · 5000 installs
- [architecture-diagram-creator](https://affpapa.org/en/nevibecode/skills/architecture-diagram-creator.md) — skill · 453 installs
- [diagram-design](https://affpapa.org/en/nevibecode/skills/diagram-design.md) — skill · 19600 installs
- [html-diagram](https://affpapa.org/en/nevibecode/skills/html-diagram.md) — skill · 4100 installs

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md