diagram-types_zh
·
图表类型预设
当用户请求特定图表类型时,应用下方匹配的预设来确定形状、样式和布局约定。这些预设设置结构性样式关键字(如 ERD 的 shape=table;childLayout=tableLayout);用户的样式预设(参见 references/style-presets.md)在其上叠加颜色/字体/连线/附加属性。
在以下情况下阅读本文档:
- 用户指定了其中一种图表类型(ERD、UML 类图、序列图、架构图、ML/DL 模型图、流程图)
- 你正在为新图表选择形状词汇或布局方向
ERD(实体关系图)
| 元素 | 样式 | 说明 |
|---|---|---|
| 表 | shape=table;startSize=30;container=1;collapsible=1;childLayout=tableLayout;fixedRows=1;rowLines=0;fontStyle=1;strokeColor=#6c8ebf;fillColor=#dae8fc; |
每个表是一个容器 |
| 行(列) | shape=tableRow;horizontal=0;startSize=0;swimlaneHead=0;swimlaneBody=0;fillColor=none;collapsible=0;dropTarget=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;fontSize=12; |
表的子元素,parent=tableId |
| 主键列 | 粗体文本:该行的 fontStyle=1 |
以 PK 前缀或键图标标记 |
| 外键关系 | 虚线连线:dashed=1;endArrow=ERmandOne;startArrow=ERmandOne; |
使用 ER 表示法箭头 |
| 布局 | TB(从上到下),表格间距 300px | 相关表格纵向分组 |
UML 类图
| 元素 | 样式 | 说明 |
|---|---|---|
| 类框 | swimlane;fontStyle=1;align=center;startSize=26;html=1; |
3 个分区:标题 / 属性 / 方法 |
| 分隔线 | line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=10;rotatable=0;labelPosition=left;points=[];portConstraint=eastwest; |
位于分区之间 |
| 继承 | endArrow=block;endFill=0; |
空心三角箭头 |
| 实现 | endArrow=block;endFill=0;dashed=1; |
虚线 + 空心三角 |
| 组合 | endArrow=diamondThin;endFill=1; |
实心菱形 |
| 聚合 | endArrow=diamondThin;endFill=0; |
空心菱形 |
| 布局 | TB(从上到下),类间距 250px | 接口位于实现之上 |
序列图
| 元素 | 样式 | 说明 |
|---|---|---|
| 角色/对象 | shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;html=1;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;portConstraint=eastwest; |
带虚线垂直连线的生命线 |
| 同步消息 | html=1;verticalAlign=bottom;endArrow=block; |
实线,实心箭头 |
| 异步消息 | html=1;verticalAlign=bottom;endArrow=open;dashed=1; |
虚线,开放箭头 |
| 返回消息 | html=1;verticalAlign=bottom;endArrow=open;dashed=1;strokeColor=#999999; |
灰色虚线 |
| 激活框 | 生命线上的 shape=umlFrame;whiteSpace=wrap; |
生命线上的窄矩形 |
| 布局 | LR(从左到右),生命线间距 200px | 时间从上到下流动 |
架构图
| 元素 | 样式 | 说明 |
|---|---|---|
| 层/层级 | swimlane;startSize=30; |
用于分组的容器:客户端 / API / 服务 / 数据 |
| 服务 | rounded=1;whiteSpace=wrap;html=1; + 层级颜色 |
按层级使用颜色调色板 |
| 数据库 | shape=cylinder3;whiteSpace=wrap;html=1; |
绿色调色板 |
| 队列/总线 | rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656; |
黄色——居中放置作为枢纽模式 |
| 网关/负载均衡 | shape=mxgraph.aws4.resourceIcon; 或带橙色的 rounded=1; |
橙色调色板 |
| 外部系统 | rounded=1;dashed=1;fillColor=#f5f5f5;strokeColor=#666666; |
外部系统使用虚线边框 |
| 布局 | 按层级数选择 TB 或 LR;≥4 层 → TB | 枢纽节点居中 |
ML / 深度学习模型图
用于神经网络架构图——适用于向 NeurIPS、ICML、ICLR 等会议投稿的论文。
| 元素 | 样式 | 说明 |
|---|---|---|
| 层块 | rounded=1;whiteSpace=wrap;html=1; + 类型颜色 |
主要构建块 |
| 输入/输出 | fillColor=#d5e8d4;strokeColor=#82b366; |
绿色 |
| 卷积/池化 | fillColor=#dae8fc;strokeColor=#6c8ebf; |
蓝色 |
| 注意力/Transformer | fillColor=#e1d5e7;strokeColor=#9673a6; |
紫色 |
| RNN / LSTM / GRU | fillColor=#fff2cc;strokeColor=#d6b656; |
黄色 |
| 全连接/线性层 | fillColor=#ffe6cc;strokeColor=#d79b00; |
橙色 |
| 损失/激活 | fillColor=#f8cecc;strokeColor=#b85450; |
红色/粉色 |
| 跳跃连接 | dashed=1;endArrow=block;curved=1; |
虚线曲线箭头 |
| 张量形状标签 | 添加形状注释作为次级标签:value="Conv2D
(B, 64, 32, 32)" |
使用 
 实现多行 |
| 布局 | TB(数据从上到下流动),层间距 150px | 将编码器/解码器分组为泳道 |
张量形状约定: 以 (B, C, H, W) 或 (B, T, D) 格式为每层标注输入/输出张量维度。使用 
 将维度放在标签的第二行。
流程图(增强版)
| 元素 | 样式 | 说明 |
|---|---|---|
| 开始/结束 | ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366; |
绿色椭圆形 |
| 处理过程 | rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf; |
蓝色矩形 |
| 判断 | rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656; |
黄色菱形 |
| 输入/输出 | shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00; |
橙色平行四边形 |
| 子流程 | rounded=0;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6; + 双边框 |
紫色 |
| 是/否标签 | 判断连线上的 value="Yes" / value="No" |
始终标记判断分支 |
| 布局 | TB(从上到下),纵向间距 200px | 判断分支左右展开,合并回中央 |
更多推荐


所有评论(0)