skills.rest
hdeshev
hdeshevCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

d2

Generate D2 diagrams from conversation context as PNG images styled for Emacs themes.

Updated May 2, 2026
Search Tags:#theming#png#emacs#visualization#d2#diagram#emacsclient
One-click install
npx skills add https://github.com/hdeshev/pi-config --skill d2-hdeshev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: d2
Source: https://github.com/hdeshev/pi-config/tree/main/agent/skills/emacs-d2
Command: npx skills add https://github.com/hdeshev/pi-config --skill d2-hdeshev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning a discussion or architecture explanation into a visual diagram usually requires manually writing diagram code and guessing colors that match your editor theme. This Skill automates that by generating D2 diagrams from the current conversation context, styled to match your Emacs foreground color and background mode. ## Core Features & Use Cases - Context-to-Diagram Generation: Extracts diagrammable data from the recent conversation and renders it as a D2 diagram. - Emacs Theme Awareness: Queries Emacs via emacsclient for the default foreground color and background mode, then applies matching D2 themes (200 for dark, 0 for light) so diagrams are readable inline. - Inline Image Output: Renders a PNG with D2 and outputs a markdown image link that displays directly in the chat. - Use Case: After discussing a system architecture in Emacs, invoke /d2 to instantly get a themed diagram of the components and their relationships rendered inline. ## Quick Start Invoke /d2 to create a diagram from the current conversation context and display the resulting PNG image inline.

Frequently Asked Questions about d2

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a diagram from my conversation with D2?▼

Invoke /d2 in the session and the skill extracts diagrammable data from the recent context, writes a D2 file, and renders it to a PNG. The result is output as a markdown image that displays inline.

How does D2 diagram theming work with Emacs?▼

The skill queries Emacs via emacsclient for the default face foreground color and the frame background-mode. It uses D2 theme 200 for dark backgrounds and theme 0 for light, applying the foreground color to node and edge strokes.

Can I use D2 diagrams outside of Emacs?▼

This skill is designed for Emacs integration since it queries emacsclient for theme colors. Without a running Emacs server, the color and background-mode queries will fail, so it is best used within an Emacs-connected session.

Why does my D2 diagram fail to render?▼

Rendering fails if the d2 CLI is not installed or if the generated D2 syntax is invalid. Check that d2 is available on your PATH and that the diagram structure follows valid D2 syntax with proper node and edge definitions.

What happens if there is no diagrammable content in the context?▼

If the recent conversation contains no data suitable for a diagram, the skill informs the user instead of producing an empty or meaningless image. Provide context describing components, flows, or relationships before invoking /d2.

Related Skills

Explore More Software Engineering Skills→
NITRR-OfficialNITRR-Official
4

diagrammer

Convert JSON specifications into SVG diagrams for technical documentation.

Official
Basic
RosyGameStudioRosyGameStudio

add-screenshot

Capture a screenshot from a forge-gpu lesson and embed it in its README.

Official
Intermediate
benonionsbenonions

mermaid

Generate Mermaid diagrams from textual context with Emacs integration.

Community
Advanced
neverpreparedneverprepared

image-to-diagram

Convert visual diagrams from images into Mermaid or Graphviz code.

Official
Intermediate