How to Apply Terminal/CLI-Window Styling to Diagrams in the Diagram Design Repository

Diagram Design provides a terminal-window primitive that wraps any diagram in a fake console UI featuring a title bar with three dots, a monospace $ prompt, and a fixed color palette.

The Diagram Design repository (cathrynlavery/diagram-design) ships with a specialized terminal skin designed for developer-focused content. Applying terminal/CLI-window styling to diagrams lets you generate realistic console screenshots for CLI tool launches, CI pipeline documentation, and technical social cards without running actual terminal emulators.

Activating Terminal Mode via Skill Commands

The routing matrix in skills/diagram-design/SKILL.md maps the cues "terminal" or "CLI-window" to the references/primitive-terminal.md reference file. When the skill detects these keywords, it automatically wraps the generated diagram in the terminal HTML structure and injects the corresponding CSS variables.

Natural Language Prompting

When interacting with AI agents (Pi, Claude Code, Codex) or the Diagram Design skill interface, include the terminal keyword in your request:

Make me a flowchart of my CI pipeline, but render it as a terminal window.

For agents that support slash commands (such as Pi), use the explicit syntax:

/diagram-design:render flowchart --terminal

Command-Line Interface Usage

For local installations of the skill, append the --skin terminal flag to the render command:

diagram-design render --type flowchart --skin terminal > ci-flowchart.html

The output file contains the full HTML wrapper with the <div class="terminal"> container and embedded CSS variables.

Understanding Terminal Skin Architecture

Unlike standard Diagram Design skins that inherit from brand onboarding tokens, the terminal skin uses a fixed token set defined in references/style-guide.md. This ensures consistent "console screenshot" aesthetics regardless of brand colors.

Fixed Color Tokens

The terminal skin relies on three core tokens:

• terminal-paper — The background color (typically dark)
• terminal-ink — Primary text color (typically light)
• terminal-accent — Highlight color for the active dot and prompt elements

These tokens map to CSS variables (--terminal-paper, --terminal-ink, --terminal-accent) that the skill injects into the document <head> when the terminal primitive is active.

HTML Wrapper Structure

The skill wraps the rendered SVG diagram in a specific DOM structure defined in primitive-terminal.md (lines 27-45):

<div class="terminal">
  <div class="titlebar">
    <div class="dot accent"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="titlebar-name">my-script.sh — description</div>
  </div>
  <main class="frame">
    <p class="prompt"><span class="sign">$</span> diagram-design render --type flowchart</p>
    <h1># Title</h1>

    <svg><!-- diagram content --></svg>
  </main>
</div>

The <style> block within primitive-terminal.md handles the visual styling, ensuring the monospace typography and window chrome render consistently across browsers.

Manual Implementation and Customization

For handcrafted diagrams or integration into existing web pages, you can manually implement the terminal wrapper without invoking the full skill pipeline.

Embedding Terminal Styling in HTML

Copy the CSS rules from references/primitive-terminal.md (lines 27-45) and apply the terminal class structure:

<link rel="stylesheet" href="path/to/terminal-skin.css">
<div class="terminal">
  <div class="titlebar">
    <div class="dot accent"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="titlebar-name">demo.sh — demo diagram</div>
  </div>
  <main class="frame">
    <p class="prompt"><span class="sign">$</span> diagram-design render --type architecture</p>
    <svg><!-- Insert generated diagram SVG here --></svg>
  </main>
</div>

Reference the complete implementation in skills/diagram-design/assets/example-loop-terminal.html for a full-size example.

Registering the Terminal Icon

The terminal icon is registered in the icon build system at line 114 of scripts/build-icons.py:

("terminal", "tabler", "terminal", "Shell / CLI.")

To include the terminal icon in the gallery for diagrams that support iconography, run the build script:

python3 scripts/build-icons.py

Best Practices for Terminal Styling

Use terminal/CLI-window styling for developer-focused announcements, CLI-tool launch posts, technical social-card images, and CI/CD pipeline visualizations. The aesthetic signals "this is a terminal screenshot" to technical audiences.

Avoid terminal styling for editorial long-form content or marketing materials requiring brand-matched colors. Because the terminal skin uses fixed tokens that do not inherit from brand onboarding, it will clash with custom color palettes.

Summary

• Trigger terminal mode by including "terminal" or "CLI-window" in prompts, or use the --skin terminal CLI flag.
• Reference the primitive at skills/diagram-design/references/primitive-terminal.md for HTML templates and CSS (lines 27-45).
• Fixed tokens (terminal-paper, terminal-ink, terminal-accent) provide consistent console aesthetics but do not inherit brand colors.
• Manual embedding requires the .terminal wrapper div with .titlebar (three dots) and .frame (prompt + SVG) structure.
• Icon support requires running scripts/build-icons.py to register the terminal glyph.

Frequently Asked Questions

Can I customize the terminal colors to match my brand?

No. The terminal skin uses fixed tokens defined in the style guide that do not inherit from brand onboarding tokens. According to the source code in primitive-terminal.md, the CSS variables (--terminal-paper, --terminal-accent, etc.) are hard-coded to maintain consistent "authentic terminal" aesthetics across all implementations.

How do I change the title bar text in the terminal window?

Modify the .titlebar-name div content in the HTML structure. When using the CLI, the skill auto-generates this from the diagram filename and description metadata. For manual implementations, edit the text node inside <div class="titlebar-name"> in your HTML scaffold.

Is the terminal icon available in all diagram types?

The terminal icon is available only after registration via scripts/build-icons.py line 114. Once built into the icon set, it can be referenced in any diagram type that supports iconography. Run python3 scripts/build-icons.py to update the gallery and make the terminal icon selectable.

Can I use terminal styling with automated CI pipelines?

Yes. Use the --skin terminal flag in headless rendering environments: diagram-design render --type flowchart --skin terminal > output.html. The generated HTML is self-contained and requires no external runtime dependencies beyond the standard CSS included in the output.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}