技
技术图表生成
作者：鹿Sir开发工具v4
使用 HTML/CSS 生成扁平工程蓝图风格的技术示意图。当用户需要创建架构图、系统图、流程图或技术规格图时使用。触发词：架构图、系统图、流程图、技术图、示意图、工程图、蓝图。
下载量
261
点赞
64
价格
免费
技能文档
---
name: drafter-diagram
title: 技术图表生成
category: 内容创作
description: 使用 HTML/CSS 生成扁平工程蓝图风格的技术示意图。当用户需要创建架构图、系统图、流程图或技术规格图时使用。触发词：架构图、系统图、流程图、技术图、示意图、工程图、蓝图。
---
# 扁平工程蓝图风格图表生成器
生成精确、客观、高数据墨水比的图表。输出应类似技术规格书或架构图，而非营销落地页。
## 核心理念
精确、客观、高数据墨水比。
## 视觉规则
### 1. 无装饰
- 不使用投影
- 不使用渐变
- 不使用毛玻璃/模糊效果
- 不使用圆角按钮
### 2. 扁平与描边
- 使用 1px 或 2px 实线边框构建结构
- 内容区块使用白色背景
### 3. 单色基调
```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: system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'SF Mono', Monaco, Consolas, monospace;
}
```
- 背景：浅灰 (#f8fafc)
- 画布：白色 (#ffffff)，Slate 边框 (#cbd5e1)
- 文字：高对比度黑色 (#0f172a) 与 Slate 灰 (#64748b)
- 强调色：使用黑色或单一语义色（如红色表示错误），节制使用
### 4. 字体排版
- 标题/标签：无衬线字体（`system-ui, -apple-system, 'Segoe UI', sans-serif`）
- 数据/路径/代码：等宽字体（`'SF Mono', Monaco, Consolas, monospace`）
### 5. 布局结构
- 图表必须包含在 `diagram-canvas` 内（带内边距的边框容器）
- 头部：标题 + 大写副标题，用实线下边框分隔
- 网格/Flexbox 对齐：所有元素必须严格对齐
### 6. 元素
- 连接线：细、直线或正交线段。抽象关系使用虚线
- 图标：简单描边 SVG 图标（无填充或复杂细节）
- 标签：描边或实心黑/灰色块，小字号
## 关键要求
1. 仅使用系统字体，不使用外部 CDN（如 Google Fonts）
2. 仅返回完整的 HTML 内容，不包含 Markdown 代码块
3. HTML 必须是完整的、自包含的文档，包含 `<!DOCTYPE html>`
4. 所有样式通过 `<style>` 标签内联
5. 优先使用中文文本，使用系统字体
## 输出格式
返回完整的 HTML 文档：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>[Diagram Title]</title>
<style>
:root {
--c-bg: #f8fafc;
--c-canvas: #ffffff;
--c-border: #cbd5e1;
--c-text-main: #0f172a;
--c-text-sub: #64748b;
--font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'SF Mono', Monaco, Consolas, monospace;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: var(--c-bg);
font-family: var(--font-ui);
color: var(--c-text-main);
padding: 40px;
}
.diagram-canvas {
background: var(--c-canvas);
border: 2px solid var(--c-border);
padding: 32px;
max-width: 1200px;
margin: 0 auto;
}
.diagram-header {
border-bottom: 1px solid var(--c-border);
padding-bottom: 16px;
margin-bottom: 24px;
}
.diagram-title {
font-size: 24px;
font-weight: 600;
color: var(--c-text-main);
}
.diagram-subtitle {
font-size: 12px;
font-weight: 500;
color: var(--c-text-sub);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 4px;
}
/* Add diagram-specific styles here */
</style>
</head>
<body>
<div class="diagram-canvas">
<div class="diagram-header">
<h1 class="diagram-title">[Title]</h1>
<p class="diagram-subtitle">[SUBTITLE IN UPPERCASE]</p>
</div>
<!-- Diagram content here -->
</div>
</body>
</html>
```
## 常用组件
### 节点/方框
```css
.node {
background: var(--c-canvas);
border: 1px solid var(--c-border);
padding: 12px 16px;
}
```
### 标签
```css
.badge {
display: inline-block;
font-size: 10px;
font-family: var(--font-mono);
padding: 2px 6px;
border: 1px solid var(--c-text-main);
text-transform: uppercase;
}
.badge--filled {
background: var(--c-text-main);
color: var(--c-canvas);
}
```
### 连接线（使用伪元素或 SVG）
```css
.connector {
border-top: 1px solid var(--c-border);
}
.connector--dashed {
border-top-style: dashed;
}
```
### 等宽文本
```css
.mono {
font-family: var(--font-mono);
font-size: 13px;
}
```使用说明
# 技术图表生成 使用 HTML/CSS 生成扁平工程蓝图风格的技术示意图。 ## 功能 - 生成架构图、系统图、流程图、技术规格图 - 输出为自包含 HTML 文件，可直接保存或分享 - 扁平蓝图风格，线条清爽、精确客观 ## 使用方式 描述需要绘制的图表主题和要点即可。适用于汇报、文档配图或团队对齐思路等场景。 ## 触发词 架构图、系统图、流程图、技术图、示意图、工程图、蓝图
支持平台：Qoder · QoderWork · Claude · Codex 等 AI 编程助手