mcpField
D
d2

d2

github.com/xenodiumDocuments14751 installsUpdated 14w ago
Repository

About d2

d2 is a skill for agents that turns recent interaction context into D2 diagrams and renders them as inline PNG images. It adapts diagram styling to Emacs foreground and background settings.

Key features

  1. 01Extracts diagram data from recent context
  2. 02Creates D2 source files
  3. 03Sets themes from Emacs appearance
  4. 04Outputs PNG as a Markdown image

Use cases

  1. 01Diagram a process discussed in a conversation
  2. 02Visualize information from recent context

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/xenodium/emacs-skills --skill d2

After installing, type/d2in Claude Code to confirm it loaded.

Details

From the project README

Create diagrams with D2

Create a diagram from the most recent interaction context using D2. Generate a PNG image and output it as a markdown image so it renders inline.

How to create a diagram

  1. Extract or derive diagrammable data from the current context.
  2. If the Emacs foreground color and background mode are not already known from a previous diagram in this session, query them: 
    emacsclient --eval '(face-foreground (quote default))'
emacsclient --eval '(frame-parameter nil (quote background-mode))'
    The first returns a hex color like "#eeffff". The second returns dark or light. Reuse both for all subsequent diagrams.
  3. Write a D2 file to a temporary file using the foreground color.
  4. Run D2 with --theme 200 if background mode is dark, or --theme 0 if light.
  5. Output the result as a markdown image on its own line: 
    ![description](/tmp/agent-diagram-XXXX.png)

# Use --theme 200 for dark, --theme 0 for light
d2 --theme 200 --pad 40 /tmp/agent-diagram-XXXX.d2 /tmp/agent-diagram-XXXX.png

D2 template

Use --theme 200 for dark or --theme 0 for light, based on the Emacs background mode. Apply the queried foreground color to style.font-color and style.stroke on nodes and edges.

direction: right

node1: Label {
  style.font-color: "#eeffff"
  style.fill: "#2d3748"
  style.stroke: "#eeffff"
}

node2: Label {
  style.font-color: "#eeffff"
  style.fill: "#2d3748"
  style.stroke: "#eeffff"
}

node1 -> node2: label {style.stroke: "#eeffff"; style.font-color: "#eeffff"}

Rules

  • Query the Emacs foreground color once per session and reuse it for all subsequent diagrams. Only query again if the color is not already known.
  • Query the Emacs background mode once per session via (frame-parameter nil 'background-mode). Use --theme 200 for dark or --theme 0 for light. Always use --pad 40.
  • Always use a timestamp in the filename (e.g., /tmp/agent-diagram-$(date +%s).png). Never use descriptive names.
  • Set the queried foreground color on style.font-color and style.stroke for all nodes and edges so the diagram is readable on the user's Emacs background.
  • Use meaningful fill colors to distinguish different types of elements.
  • After D2 runs successfully, output a markdown image (![description](path)) on its own line.
  • Choose an appropriate layout direction and structure for the data.
  • Include labels on edges when they add clarity.
  • If no diagrammable data exists in the recent context, inform the user.

Comments

Markdown supported