d2-render

/d2-render

User request: "$ARGUMENTS"

Task

Render D2 diagrams from an existing .d2 file or a .md file with D2 code blocks to SVG or PNG images.

Process

Step 1: Resolve Plugin Path

PLUGIN_DIR=$(find "$HOME/.claude/plugins/cache" -type d -name "d2" -path "*/skills/d2" 2>/dev/null | head -1)
[ -z "$PLUGIN_DIR" ] && PLUGIN_DIR=$(find "$HOME" -maxdepth 8 -type d -name "d2" -path "*/skills/d2" 2>/dev/null | head -1)

Step 2: Ensure D2 is installed

bash "$PLUGIN_DIR/scripts/ensure-deps.sh"

If .claude/d2.json does not exist, display a one-time nudge before continuing:

First time using the d2 plugin? Run /d2-config to pick a theme and output settings. Using defaults for now (theme 0 / Neutral, ./diagrams).

Step 3: Read Config

If .claude/d2.json exists, read:

• output_directory (default: ./diagrams)
• output_format (default: svg)

Resolve output path:

• If output_directory is "same" AND input file path is known: OUTPUT_DIR=$(dirname {input_file})
• If output_directory is "same" AND no input file: OUTPUT_DIR=./diagrams
• Otherwise: OUTPUT_DIR={output_directory}

Step 4: Determine Input

From $ARGUMENTS:

• .d2 file → render directly
• .md file → extract D2 blocks first: bash "$PLUGIN_DIR/scripts/extract_d2.sh" {file.md}
• Directory → find all .d2 files: find {dir} -name "*.d2" -not -path "*/node_modules/*"
• No argument → ask: "Which file or directory should I render?"

Step 5: Render

Run for each .d2 file:

mkdir -p {OUTPUT_DIR}
d2 {input_file} {OUTPUT_DIR}/{basename}.{output_format}

For PNG output: Warn the user if PNG fails that it requires Playwright:

PNG rendering failed. Playwright is required for PNG export.
Install: npm install -g playwright && playwright install chromium
Or switch to SVG: /d2-config → option 7

Note: Generated .d2 files already contain the vars { d2-config } block with the theme and layout settings — no additional CLI flags are needed. The d2 command will use the embedded configuration automatically.

Step 6: Report

List all output files generated with full paths:

Rendered {N} diagrams:
  ✅ diagrams/architecture-services-20260310.svg
  ✅ diagrams/sequence-auth-flow-20260310.svg

If any rendering failed:

  ❌ diagrams/er-schema-20260310.svg — {error message}

Run /d2-config → health check to diagnose issues.

Output Format

Rendered {N} / {total} diagrams:

  ✅ {output_path_1}
  ✅ {output_path_2}
  ❌ {output_path_3} — {error}