夜雨聆风
免费使用在线Mermaid图表编辑器做图表
在线制作雷达图
在线制作旭日图
在线制作散点图
在线制作南丁格尔玫瑰图
在线制作环形图
在线制作漏斗图
在线制作仪表盘图
在线数学公式绘制图表
在线制作词云图
在线生成人物关系图
在线Mermaid图表编辑器
拿在线Mermaid图表编辑器举例，Mermaid 是一种用文本代码画图表的方式（类似 Markdown）。而这个在线编辑器的作用是：你写左边 Mermaid 代码，右边实时生成图表，还能下载成图片。
它支持画这些常见图表类型：
-
流程图（flowchart）
-
思维导图（mindmap）
-
时序图 / 类图 / 状态图
-
ER 图 / 象限图 / 饼图
-
甘特图 / Git 图 / 用户旅程图 等
界面布局如下：
|
|
|
|---|---|
| Mermaid 代码框（左） |
|
| 图表预览区（右） |
|
| 下载格式 |
|
| 主题 |
|
| 配置 |
|
| 宽 / 高 / 背景色 |
|
| 自动生成开关 |
|
第一步打开https://www.lddgo.net/chart/mermaid-chart；
第二步左侧输入代码；
第三步调整样式（颜色 / 主题），在「配置」里写 JSON
第四步导出图表，推荐选择 SVG，清晰，可缩放
代码细节：
flowchart TD（从上到下） TD = Top Down
flowchart LR（从左到右） TD = Top Down
classDef level1 fill:#FFD700,stroke:#8B4513,stroke-width:2px,color:#333
classDef level2 fill:#FF69B0,stroke:#FF69B4,stroke-width:2px,color:#333
classDef level3 fill:#87CEFA,stroke:#1E90FF,stroke-width:2px,color:#333
定义层级
class A level1
class B,C,D,E level2
class B1,B2,B3,B11,B12,,B13,B14,B21,B22,,B23,B24,,C1,C2,C3,C4 level3
classDef，更稳定、直观。|
|
|
|
|
|
|---|---|---|---|---|
| 红色系 |
|
#FF6347 |
|
|
|
|
#FF7F50 |
|
|
|
|
|
#CD5C5C |
|
|
|
| 橙色/黄色系 |
|
#FFA500 |
|
|
| 金黄色 | **#FFD700** |
|
|
|
|
|
#F0E68C |
|
|
|
| 绿色系 |
|
#7CFC00 |
|
|
|
|
#3CB371 |
|
|
|
|
|
#6B8E23 |
|
|
|
| 蓝色系 | 浅天蓝 | **#87CEFA** |
|
|
| 道奇蓝 | **#1E90FF** |
|
|
|
|
|
#4682B4 |
|
|
|
|
|
#483D8B |
|
|
|
| 紫色/粉色系 |
|
#EE82EE |
|
|
| 亮粉红 | **#FF69B0** |
|
|
|
| 热粉色 | **#FF69B4** |
|
|
|
|
|
#BA55D3 |
|
|
|
| 中性色系 |
|
#F5F5F5 |
|
|
|
|
#C0C0C0 |
|
|
|
|
|
#696969 |
|
color) |
|
| 黑色/深色 | #333
#000 |
|
文字颜色
|
颜色不需要死记硬背，用这个网页：
https://www.w3schools.com/colors/colors_picker.asp
点一下就出来对应的颜色代码
flowchart LR
A[玫瑰花分类]:::l1
A –> B[按花型分类]:::l2
A –> C[按花色分类]:::l3
A –> D[按株型分类]:::l4
A –> E[按用途分类]:::l5
B –> B1[杯状玫瑰]
B –> B2[莲座玫瑰]
B –> B3[绒球玫瑰]
B –> B4[单瓣玫瑰]
B –> B5[重瓣玫瑰]
C –> C1[红色玫瑰]
C –> C2[粉色玫瑰]
C –> C3[白色玫瑰]
C –> C4[黄色玫瑰]
C –> C5[紫色玫瑰]
C –> C6[双色玫瑰]
D –> D1[灌木玫瑰]
D –> D2[藤本玫瑰]
D –> D3[微型玫瑰]
D –> D4[大花玫瑰]
E –> E1[观赏玫瑰]
E –> E2[食用玫瑰]
E –> E3[药用玫瑰]
E –> E4[精油玫瑰]
%% ========== 分层级设置箭头线颜色 ==========
%% 第1层：根节点到四大分类（4条线：A→B, A→C, A→D, A→E）
linkStyle 0 stroke:#DAA520,stroke-width:2.5px,stroke-dasharray:5 2
linkStyle 1 stroke:#DAA520,stroke-width:2.5px,stroke-dasharray:5 2
linkStyle 2 stroke:#DAA520,stroke-width:2.5px,stroke-dasharray:5 2
linkStyle 3 stroke:#DAA520,stroke-width:2.5px,stroke-dasharray:5 2
%% 第2层：花型分类的子节点（B→B1 到 B→B5，共5条线，索引4-8）
linkStyle 4 stroke:#FF69B4,stroke-width:2px
linkStyle 5 stroke:#FF69B4,stroke-width:2px
linkStyle 6 stroke:#FF69B4,stroke-width:2px
linkStyle 7 stroke:#FF69B4,stroke-width:2px
linkStyle 8 stroke:#FF69B4,stroke-width:2px
%% 第3层：花色分类的子节点（C→C1 到 C→C6，共6条线，索引9-14）
linkStyle 9 stroke:#228B22,stroke-width:2px
linkStyle 10 stroke:#228B22,stroke-width:2px
linkStyle 11 stroke:#228B22,stroke-width:2px
linkStyle 12 stroke:#228B22,stroke-width:2px
linkStyle 13 stroke:#228B22,stroke-width:2px
linkStyle 14 stroke:#228B22,stroke-width:2px
%% 第4层：株型分类的子节点（D→D1 到 D→D4，共4条线，索引15-18）
linkStyle 15 stroke:#1E90FF,stroke-width:2px
linkStyle 16 stroke:#1E90FF,stroke-width:2px
linkStyle 17 stroke:#1E90FF,stroke-width:2px
linkStyle 18 stroke:#1E90FF,stroke-width:2px
%% 第5层：用途分类的子节点（E→E1 到 E→E4，共4条线，索引19-22）
linkStyle 19 stroke:#9932CC,stroke-width:2px
linkStyle 20 stroke:#9932CC,stroke-width:2px
linkStyle 21 stroke:#9932CC,stroke-width:2px
linkStyle 22 stroke:#9932CC,stroke-width:2px
%% ========== 节点样式（保持您原有设置，只补充font-size统一） ==========
classDef l1 fill:#FFD700,stroke:#DAA520,stroke-width:2.5px,font-size:28px,color:#333
classDef l2 fill:#FFB6C1,stroke:#FF69B4,stroke-width:2.5px,font-size:22px,color:#333
classDef l3 fill:#98FB98,stroke:#228B22,stroke-width:2.5px,font-size:22px,color:#333
classDef l4 fill:#87CEFA,stroke:#1E90FF,stroke-width:2.5px,font-size:22px,color:#333
classDef l5 fill:#DDA0DD,stroke:#9932CC,stroke-width:2.5px,font-size:22px,color:#333
%% 叶子节点统一字体大小
classDef leaf fill:#FEF9E6,stroke:#CCAA66,stroke-width:1.5px,font-size:18px,color:#555
class B1,B2,B3,B4,B5,C1,C2,C3,C4,C5,C6,D1,D2,D3,D4,E1,E2,E3,E4 leaf
|
|
stroke-dasharray
|
|
|---|---|---|
| 实线 | 0
|
|
| 紧凑虚线 | 5 2 |
|
| 标准虚线 | 5 5 |
|
| 稀疏虚线 | 10 8 |
|
| 密集虚线 | 3 3 |
|
| 点线 | 2 4 |
|
| 划线-点线 | 8 4 2 4 |
|
linkStyle 控颜色，stroke-dasharray 控线型，classDef 控节点。