---
id: yofine-blueprinter
name: "blueprinter"
url: https://skills.yangsir.net/skill/yofine-blueprinter
author: yofine
domain: design
tags: ["diagram", "html-css", "blueprint", "architecture", "visualization"]
install_count: 809
rating: 4.20 (32 reviews)
github: https://github.com/yofine/skills/tree/main/blueprinter
---
# blueprinter
> 使用 HTML/CSS 生成扁平工程蓝图风格的技术图表，包括架构图、系统图、流程图和技术规格表。遵循高数据墨水比原则，无装饰、无阴影、无渐变，输出精确客观的技术可视化。
**Stats**: 809 installs · 4.2/5 (32 reviews)
## Before / After 对比
### 技术图表生成
| Metric | Before | After | Change |
|---|---|---|---|
| - | 30-60分钟 | 5-10分钟 | - |
| - | 60% | 98% | - |
| - | 低 | 高（代码化） | - |
## Readme
# Blueprinter
Generate technical diagrams using HTML/CSS following the "Flat Engineering Blueprint" style guidelines.
## Core Philosophy
Precise, Objective, High Data-Ink Ratio. The output should look like a technical specification sheet or an architectural diagram, NOT a marketing landing page.
## Visual Rules
### 1. No Decorations
- NO drop shadows
- NO gradients
- NO glassmorphism/blur
- NO rounded buttons
### 2. Flat & Outlined
- Use 1px or 2px solid borders for structure
- Use white backgrounds for content blocks
### 3. Monochrome Base
| Element | Color |
|---------|-------|
| Background | Light Gray (#f8fafc) |
| Canvas | White (#ffffff) with Slate Border (#cbd5e1) |
| Text (Main) | High contrast Black (#0f172a) |
| Text (Sub) | Slate Gray (#64748b) |
| Accent | Use BLACK or ONE semantic color (e.g., Red for Error) sparingly |
### 4. Typography
- Headings/Labels: Sans-serif (Inter/Helvetica)
- Data/Paths/Code: Monospace (JetBrains Mono/Consolas)
### 5. Layout Structure
- The diagram must be contained within a `diagram-canvas` (a bordered box with padding)
- Header: Title + Uppercase Subtitle, separated by a solid bottom border
- Grid/Flexbox alignment: Everything must be strictly aligned
### 6. Elements
- **Connectors**: Thin, straight or orthogonal lines. Dashed lines for abstract relationships.
- **Icons**: Simple stroke SVG icons (no fill or complex details)
- **Badges**: Outlined or solid black/gray blocks. Small font size.
## CSS Variable Reference
```css
:root {
--c-bg: #f8fafc; /* Outer Background */
--c-canvas: #ffffff; /* Diagram Background */
--c-border: #cbd5e1; /* Slate-300 */
--c-text-main: #0f172a; /* Slate-900 */
--c-text-sub: #64748b; /* Slate-500 */
--font-ui: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
```
## HTML Structure Template
```html
[Diagram Title]
[Diagram Title]
[Diagram Type / Version]
```
## Usage Guidelines
1. **Always use the CSS variables** - never hardcode colors
2. **Keep it flat** - no shadows, no gradients, no blur effects
3. **Use monospace for data** - any technical values, paths, codes should use `--font-mono`
4. **Align strictly** - use CSS Grid or Flexbox with consistent gaps
5. **Connect with lines** - use SVG for connectors between components
6. **Minimal icons** - if icons are needed, use simple stroke-only SVGs
## Example: Simple System Diagram
```html