mcpField
D
diagram-monochrome

diagram-monochrome

github.com/paulrbergDesign & UI102113 installsUpdated today
Repository

About diagram-monochrome

A design skill for creating monochrome technical schematics for people explaining systems, supply chains, or software and hardware architecture. It emphasizes readable left-to-right flows, labeled boxes, and arrows.

Key features

  1. 01Black-and-white line art
  2. 02Left-to-right flow layout
  3. 03Boxes and arrows for relationships
  4. 04Short uppercase labels
  5. 05Avoids shading and clutter

Use cases

  1. 01Diagram software or hardware architecture
  2. 02Explain an industry or supply chain

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/paulrberg/agent-skills --skill diagram-monochrome

After installing, type/diagram-monochromein Claude Code to confirm it loaded.

Details

From the project README

Monochrome Technical Schematic

Create a monochrome technical schematic in a black-and-white line-art style.

Visual Style

  • Strictly black and white only
  • No colors, no gradients, no shadows
  • Clean technical / engineering diagram aesthetic
  • Slightly hand-drawn / Excalidraw-like feel, but still neat and legible
  • Use thin-to-medium black outlines
  • White or very light background
  • Minimal visual clutter
  • Simple icons and shapes
  • High contrast
  • Flat 2D composition

Layout

  • Arrange the diagram in a clear left-to-right systems flow
  • Use rectangular labeled boxes for entities/components
  • Connect components with arrows showing flow, dependency, or exchange
  • Keep spacing even and readable
  • Make the composition feel like a technical architecture overview
  • Include small labels on arrows where useful

Typography

  • Use uppercase labels
  • Bold, condensed, technical-looking text where possible
  • Keep text short, readable, and diagrammatic
  • Prioritize legibility over decoration

Content Rules

  • Focus on structure, relationships, and flow
  • Prefer icons, chips, servers, factories, wafers, arrows, and simple symbols
  • Avoid photorealism
  • Avoid glossy UI elements
  • Avoid colorful infographic style
  • Avoid poster-like marketing style

Output Goal

The result should look like a black-and-white systems schematic or monochrome technical explainer diagram, suitable for explaining an industry, supply chain, or software/hardware architecture.

Negative Constraints

  • No color accents
  • No blueprints with dark backgrounds
  • No 3D rendering
  • No realistic shading
  • No fancy illustration style
  • No comic style
  • No cluttered infographic look

Comments

Markdown supported