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

> Learn to apply terminal CLI window styling to diagrams using the cathrynlavery/diagram-design repository. Enhance your diagrams with a fake console UI and title bar.

- Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design)
- Tags: how-to-guide
- Published: 2026-09-12

---

**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`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/SKILL.md) maps the cues "terminal" or "CLI-window" to the [`references/primitive-terminal.md`](https://github.com/cathrynlavery/diagram-design/blob/main/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:

```text
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:

```bash
/diagram-design:render flowchart --terminal

```

### Command-Line Interface Usage

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

```bash
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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/primitive-terminal.md) (lines 27-45):

```html
<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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/references/primitive-terminal.md) (lines 27-45) and apply the terminal class structure:

```html
<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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/build-icons.py):

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

```

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

```bash
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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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.