blueprinter

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Blueprinter

Generate technical diagrams using HTML/CSS following the "Flat Engineering Blueprint" style guidelines.

使用HTML/CSS遵循「扁平工程蓝图」风格规范生成技术图表。

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

1. 无装饰

NO drop shadows
NO gradients
NO glassmorphism/blur
NO rounded buttons

无投影
无渐变
无玻璃态/模糊效果
无圆角按钮

2. Flat & Outlined

2. 扁平描边风格

Use 1px or 2px solid borders for structure
Use white backgrounds for content blocks

结构使用1px或2px实线边框
内容块使用白色背景

3. Monochrome Base

3. 单色基础配色

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

元素	颜色
背景	浅灰 (#f8fafc)
画布	白色 (#ffffff) 搭配石板灰边框 (#cbd5e1)
主文本	高对比度黑色 (#0f172a)
辅助文本	石板灰 (#64748b)
强调色	少量使用黑色或单一语义色（例如红色表示错误）

4. Typography

4. 排版规范

Headings/Labels: Sans-serif (Inter/Helvetica)
Data/Paths/Code: Monospace (JetBrains Mono/Consolas)

标题/标签：无衬线字体（Inter/Helvetica）
数据/路径/代码：等宽字体（JetBrains Mono/Consolas）

5. Layout Structure

5. 布局结构

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

图表必须包裹在
```
diagram-canvas
```
容器内（带内边距的带边框盒子）
头部：标题 + 大写副标题，通过实心底部分割线隔开
Grid/Flexbox 对齐：所有元素必须严格对齐

6. Elements

6. 元素规范

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.

连接线：细直线或正交线，虚线用于表示抽象关系
图标：简单描边SVG图标（无填充或复杂细节）
徽章：描边或实心黑/灰块，使用小字号

CSS Variable Reference

CSS变量参考

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;
}

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结构模板

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Diagram Title]</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <style>
    :root {
      --c-bg: #f8fafc;
      --c-canvas: #ffffff;
      --c-border: #cbd5e1;
      --c-text-main: #0f172a;
      --c-text-sub: #64748b;
      --c-accent: #dc2626;  /* Optional: for errors/warnings only */
      --font-ui: 'Inter', sans-serif;
      --font-mono: 'JetBrains Mono', monospace;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: var(--font-ui);
      background: var(--c-bg);
      padding: 40px;
      min-height: 100vh;
    }

    .diagram-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .diagram-canvas {
      background: var(--c-canvas);
      border: 1px solid var(--c-border);
      padding: 32px;
    }

    .diagram-header {
      border-bottom: 1px solid var(--c-border);
      padding-bottom: 16px;
      margin-bottom: 24px;
    }

    .diagram-title {
      font-size: 20px;
      font-weight: 600;
      color: var(--c-text-main);
      margin-bottom: 4px;
    }

    .diagram-subtitle {
      font-size: 11px;
      font-weight: 500;
      color: var(--c-text-sub);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Component styles */
    .component {
      border: 1px solid var(--c-border);
      padding: 16px;
      background: var(--c-canvas);
    }

    .component-label {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--c-text-sub);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .component-value {
      font-family: var(--font-mono);
      font-size: 14px;
      color: var(--c-text-main);
      font-weight: 500;
    }

    /* Connector lines */
    .connector {
      stroke: var(--c-border);
      stroke-width: 1;
    }

    .connector-dashed {
      stroke: var(--c-border);
      stroke-width: 1;
      stroke-dasharray: 4 4;
    }

    /* Badges */
    .badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 10px;
      padding: 2px 6px;
      border: 1px solid var(--c-border);
      color: var(--c-text-sub);
    }

    .badge-solid {
      background: var(--c-text-main);
      color: var(--c-canvas);
      border-color: var(--c-text-main);
    }
  </style>
</head>
<body>
  <div class="diagram-container">
    <div class="diagram-canvas">
      <div class="diagram-header">
        <div class="diagram-title">[Diagram Title]</div>
        <div class="diagram-subtitle">[Diagram Type / Version]</div>
      </div>
      <!-- Diagram content goes here -->
    </div>
  </div>
</body>
</html>

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Diagram Title]</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <style>
    :root {
      --c-bg: #f8fafc;
      --c-canvas: #ffffff;
      --c-border: #cbd5e1;
      --c-text-main: #0f172a;
      --c-text-sub: #64748b;
      --c-accent: #dc2626;  /* Optional: for errors/warnings only */
      --font-ui: 'Inter', sans-serif;
      --font-mono: 'JetBrains Mono', monospace;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: var(--font-ui);
      background: var(--c-bg);
      padding: 40px;
      min-height: 100vh;
    }

    .diagram-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .diagram-canvas {
      background: var(--c-canvas);
      border: 1px solid var(--c-border);
      padding: 32px;
    }

    .diagram-header {
      border-bottom: 1px solid var(--c-border);
      padding-bottom: 16px;
      margin-bottom: 24px;
    }

    .diagram-title {
      font-size: 20px;
      font-weight: 600;
      color: var(--c-text-main);
      margin-bottom: 4px;
    }

    .diagram-subtitle {
      font-size: 11px;
      font-weight: 500;
      color: var(--c-text-sub);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Component styles */
    .component {
      border: 1px solid var(--c-border);
      padding: 16px;
      background: var(--c-canvas);
    }

    .component-label {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--c-text-sub);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .component-value {
      font-family: var(--font-mono);
      font-size: 14px;
      color: var(--c-text-main);
      font-weight: 500;
    }

    /* Connector lines */
    .connector {
      stroke: var(--c-border);
      stroke-width: 1;
    }

    .connector-dashed {
      stroke: var(--c-border);
      stroke-width: 1;
      stroke-dasharray: 4 4;
    }

    /* Badges */
    .badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 10px;
      padding: 2px 6px;
      border: 1px solid var(--c-border);
      color: var(--c-text-sub);
    }

    .badge-solid {
      background: var(--c-text-main);
      color: var(--c-canvas);
      border-color: var(--c-text-main);
    }
  </style>
</head>
<body>
  <div class="diagram-container">
    <div class="diagram-canvas">
      <div class="diagram-header">
        <div class="diagram-title">[Diagram Title]</div>
        <div class="diagram-subtitle">[Diagram Type / Version]</div>
      </div>
      <!-- Diagram content goes here -->
    </div>
  </div>
</body>
</html>

Usage Guidelines

使用指南

Always use the CSS variables - never hardcode colors
Keep it flat - no shadows, no gradients, no blur effects
Use monospace for data - any technical values, paths, codes should use
```
--font-mono
```
Align strictly - use CSS Grid or Flexbox with consistent gaps
Connect with lines - use SVG for connectors between components
Minimal icons - if icons are needed, use simple stroke-only SVGs

始终使用CSS变量 - 禁止硬编码颜色
保持扁平风格 - 无阴影、无渐变、无模糊效果
数据使用等宽字体 - 所有技术数值、路径、代码都需要使用
```
--font-mono
```
严格对齐 - 使用CSS Grid或Flexbox，保持统一间距
使用SVG绘制连接线 - 组件之间的连接关系用SVG实现
极简图标原则 - 如需使用图标，仅选择简单的描边风格SVG

Example: Simple System Diagram

示例：简单系统图

html

<div class="diagram-canvas">
  <div class="diagram-header">
    <div class="diagram-title">System Architecture</div>
    <div class="diagram-subtitle">v1.0 / Overview</div>
  </div>
  
  <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;">
    <div class="component">
      <div class="component-label">Client</div>
      <div class="component-value">Web App</div>
    </div>
    <div class="component">
      <div class="component-label">API</div>
      <div class="component-value">REST Gateway</div>
    </div>
    <div class="component">
      <div class="component-label">Database</div>
      <div class="component-value">PostgreSQL</div>
    </div>
  </div>
</div>

html

<div class="diagram-canvas">
  <div class="diagram-header">
    <div class="diagram-title">System Architecture</div>
    <div class="diagram-subtitle">v1.0 / Overview</div>
  </div>
  
  <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;">
    <div class="component">
      <div class="component-label">Client</div>
      <div class="component-value">Web App</div>
    </div>
    <div class="component">
      <div class="component-label">API</div>
      <div class="component-value">REST Gateway</div>
    </div>
    <div class="component">
      <div class="component-label">Database</div>
      <div class="component-value">PostgreSQL</div>
    </div>
  </div>
</div>