Mermaid绘制与学习

coderookietao
622 阅读12分钟

Mermaid绘制与学习

一个简单的例子

flowchart TD
    %% 样式定义
    classDef objClass fill:#e2d1f9,stroke:#9d4edd,stroke-width:2px,color:#5a189a,font-weight:bold
    classDef dataClass fill:#ffccd5,stroke:#ff5d8f,stroke-width:2px,color:#c9184a,font-weight:bold
    classDef netClass fill:#a7e8bd,stroke:#21ba45,stroke-width:2px,color:#2b9348,font-weight:bold
    classDef adapterClass fill:#f9c74f,stroke:#f8961e,stroke-width:2px,color:#e85d04,font-weight:bold
    
    %% 标题
    title["Java消息处理流程"]
    
    %% 发送流程 - 第一行
    subgraph send["发送流程"]
        direction LR
        A[/"业务对象"/]
        A -->|"MessageAdapter.createPacket()"| B["Protobuf字节数组"]
        B -->|"NettyEncoder.encode()"| C["带长度前缀的字节数组(相当于DataPgk{Len,Data}，写死在NettyEncoder中，为了简化DataPacket对象)"]
        C -->|"Channel.writeAndFlush()"| D[("Netty Channel")]
    end
    
    %% 接收流程 - 第二行
    subgraph receive["接收流程"]
        direction LR
        E[("Netty Channel")] -->|"NettyDecoder.decode()"| F["解析后的字节数组"]
        F -->|"MessageHandler.handleMessage()"| G{{"消息类型识别与路由"}}
        G -->|"MessageAdapter.parsePacket()"| H[/"业务对象"/]
   
    end
    
    %% 连接两个流程
    D -.-> E
    
    %% 确保两个流程垂直布局
    send --> receive
    
    %% 应用类样式
    class A,H objClass
    class B,C,F dataClass
    class D,E netClass
    class G adapterClass
    
    %% 标题样式
    class title fill:none,stroke:none

相关知识解读：flowchart TD:其中flowchart表示图表类型

图表类型

图表类型语法关键词主要用途典型应用场景
流程图flowchart 或 graph表示工作流程、算法或过程业务流程、程序逻辑、工作步骤
序列图sequenceDiagram显示对象之间交互的时间顺序API调用流程、用户交互流程、消息传递
类图classDiagram展示系统中的类及其关系软件架构、面向对象设计
状态图stateDiagram描述对象可能的状态和转换状态机、工作流状态流转
甘特图gantt项目日程安排和进度跟踪项目管理、时间线规划
饼图pie显示比例关系数据统计、占比分析
实体关系图erDiagram数据库设计数据库模型、实体关系
用户旅程图journey用户体验映射用户体验分析、业务流程优化
需求图requirementDiagram系统需求可视化软件需求分析
Git图gitGraphGit操作和分支流程版本控制、Git工作流

TD 表示创建一个从上到下(Top-Down)方向的流程图

图表整体方向设置

方向关键字含义语法示例适用场景
TBTop to Bottom（从上到下）flowchart TB层级关系明显的流程，如组织架构
TDTop to Down（从上到下）flowchart TD与TB完全相同，是另一种写法
BTBottom to Top（从下到上）flowchart BT自下而上的过程，如数据汇总
RLRight to Left（从右到左）flowchart RL从结果到起因的分析流程
LRLeft to Right（从左到右）flowchart LR线性流程，如时间序列或数据流

注意，不是所有类型的图都有方向设置这个属性。以下给出具体的解释。

图表类型支持整体方向设置支持子图方向设置支持的方向备注
flowchart/graph✅✅TB, TD, BT, RL, LR流程图完全支持所有方向设置
sequenceDiagram❌❌固定从上到下序列图始终是从上到下时间顺序，不可改变
classDiagram❌❌固定布局类图遵循标准UML布局，不可指定方向
stateDiagram✅❌LR, TB状态图支持有限的整体方向，无子图
erDiagram❌❌固定布局ER图遵循标准数据库模型布局
gantt❌❌固定横向甘特图始终横向展示时间线
pie❌❌固定布局饼图是固定的圆形布局
requirementDiagram❌❌固定布局需求图遵循固定布局规则
gitGraph❌❌固定横向Git图显示提交历史，固定方向
journey❌❌固定横向用户旅程图固定横向展示

Mermaid图表在Markdown中的最佳显示方案

如果原图采用横向或竖向布局

横向布局

flowchart LR
    %% 样式定义
    classDef objClass fill:#e2d1f9,stroke:#9d4edd,stroke-width:2px,color:#5a189a,font-weight:bold
    classDef dataClass fill:#ffccd5,stroke:#ff5d8f,stroke-width:2px,color:#c9184a,font-weight:bold
    classDef netClass fill:#a7e8bd,stroke:#21ba45,stroke-width:2px,color:#2b9348,font-weight:bold
    classDef adapterClass fill:#f9c74f,stroke:#f8961e,stroke-width:2px,color:#e85d04,font-weight:bold
    
    %% 标题
    title["Java消息处理流程"]
    
    %% 主流程图 - 从左到右方向
    A[/"发送端业务对象"/] -->|"MessageAdapter.createPacket()"| B["Protobuf字节数组"]
    B -->|"NettyEncoder.encode()"| C["带长度前缀的字节数组"]
    C -->|"Channel.writeAndFlush()"| D[("Netty Channel")]
    
    D -.->|"网络传输"| E[("Netty Channel")]
    
    E -->|"NettyDecoder.decode()"| F["解析后的字节数组"]
    F -->|"MessageHandler.handleMessage()"| G{{"消息类型识别与路由"}}
    G -->|"MessageAdapter.parsePacket()"| H[/"接收端业务对象"/]
    
    %% 应用类样式
    class A,H objClass
    class B,C,F dataClass
    class D,E netClass
    class G adapterClass
    
    %% 标题样式
    class title fill:none,stroke:none

垂直纵向布局

flowchart TB
    %% 高对比度商业样式
    classDef objClass fill:#d1d1e0,stroke:#2e4057,stroke-width:2px,color:#2e4057,font-weight:bold
    classDef dataClass fill:#e1e5f2,stroke:#2e4057,stroke-width:2px,color:#2e4057,font-weight:bold
    classDef netClass fill:#bfdbf7,stroke:#2e4057,stroke-width:2px,color:#2e4057,font-weight:bold
    classDef adapterClass fill:#1f7a8c,stroke:#022b3a,stroke-width:2px,color:white,font-weight:bold
    
    %% 紧凑垂直布局
    S1[/"发送端业务对象"/] -->|"① MessageAdapter.createPacket()"| S2["Protobuf字节数组"] 
    S2 -->|"② NettyEncoder.encode()"| S3["带长度前缀字节数组"]
    S3 -->|"③ Channel.writeAndFlush()"| S4[("Netty Channel")]
    
    S4 -.->|"④ 网络传输"| R1[("Netty Channel")]
    
    R1 -->|"⑤ NettyDecoder.decode()"| R2["解析后字节数组"]
    R2 -->|"⑥ MessageHandler.handleMessage()"| R3{{"消息类型识别与路由"}}
    R3 -->|"⑦ MessageAdapter.parsePacket()"| R4[/"接收端业务对象"/]
    
    %% 应用样式
    class S1,R4 objClass
    class S2,S3,R2 dataClass
    class S4,R1 netClass
    class R3 adapterClass

这在markdown中显示和阅读都不方便

所以，原图采用了一种比较合适的解决方案

混合布局分组优化
flowchart TB
    %% 蓝色专业风格
    classDef objClass fill:#caf0f8,stroke:#0077b6,stroke-width:2px,color:#03045e,font-weight:bold
    classDef dataClass fill:#90e0ef,stroke:#0077b6,stroke-width:2px,color:#03045e,font-weight:bold
    classDef netClass fill:#00b4d8,stroke:#0077b6,stroke-width:2px,color:white,font-weight:bold
    classDef adapterClass fill:#0077b6,stroke:#023e8a,stroke-width:2px,color:white,font-weight:bold
    
    %% 标题
    title["Java消息处理流程 - 混合布局"]
    
    %% 分组内水平流程，整体垂直布局
    subgraph Send["发送流程"]
        direction LR
        S1[/"业务对象"/] -->|"MessageAdapter.createPacket()"| S2["Protobuf<br>字节数组"]
        S2 -->|"NettyEncoder.encode()"| S3["带长度前缀<br>的字节数组"]
        S3 -->|"Channel.writeAndFlush()"| S4[("Netty<br>Channel")]
    end
    
    Send -.->|"网络传输"| Receive
    
    subgraph Receive["接收流程"]
        direction LR
        R1[("Netty<br>Channel")] -->|"NettyDecoder.decode()"| R2["解析后的<br>字节数组"]
        R2 -->|"MessageHandler.handleMessage()"| R3{{"消息类型<br>识别与路由"}}
        R3 -->|"MessageAdapter.parsePacket()"| R4[/"业务对象"/]
    end
    
    %% 应用样式
    class S1,R4 objClass
    class S2,S3,R2 dataClass
    class S4,R1 netClass
    class R3 adapterClass
    
    %% 标题样式
    class title fill:none,stroke:none
将内容拆分为多个子图，内部采用横向布局，子图之间采用纵向布局

%% 发送流程 - 第一行 subgraph send["发送流程"] direction LR

Mermaid 子图(Subgraph)

子图基础语法
功能语法示例说明
基本子图subgraph id
节点内容
end		subgraph sg1
A --> B
end		创建基本分组，无标题
带ID和标题子图subgraph id [标题]
节点内容
end		subgraph process [处理流程]
C --> D
end		创建带ID和显示标题的子图
带引号标题subgraph id ["标题"]
节点内容
end		subgraph sg2 ["复杂流程"]
E --> F
end		标题中可使用特殊字符
仅标题无IDsubgraph ["标题"]
节点内容
end		subgraph ["输入处理"]
G --> H
end		自动生成ID的子图
子图方向控制
方向语法说明适用场景
从左到右subgraph id
direction LR
节点内容
end		子图内节点从左到右排列线性流程，数据流向
从上到下subgraph id
direction TB
节点内容
end		子图内节点从上到下排列层级关系，决策树
从右到左subgraph id
direction RL
节点内容
end		子图内节点从右到左排列逆向分析流程
从下到上subgraph id
direction BT
节点内容
end		子图内节点从下到上排列归纳汇总流程
子图嵌套与结构
功能语法效果使用场景
子图嵌套subgraph 外层ID
subgraph 内层ID
节点内容
end
end		创建层次化的嵌套分组复杂系统分层展示
子图间连接subgraph sg1
A
end

subgraph sg2
B
end

A --> B		不同子图中的节点相互连接模块间数据流或关系
子图整体连接sg1 --> sg2整个子图作为一个单元连接到另一个子图高层次流程概览
多列子图使用方向和样式控制子图并排显示创建多列布局效果并行流程或对比展示
子图交互与连接
连接类型语法示例说明
子图到子图子图ID --> 子图IDsg1 --> sg2整体子图之间的连接
节点到子图节点ID --> 子图IDA --> sg1从外部节点到整个子图的连接
子图到节点子图ID --> 节点IDsg1 --> B从整个子图到外部节点的连接
跨子图节点连接节点ID --> 节点IDA --> B (A和B在不同子图中)不同子图中节点间的直接连接
带文本连接`子图ID -->"文本"子图ID``sg1 -->"数据流"sg2`添加连接说明的子图连接
高级子图技巧
技巧实现方法效果应用场景
透明子图style 子图ID fill:transparent,stroke:transparent创建无可见边界的逻辑分组保持分组而不影响视觉
强调子图使用醒目的填充色和边框突出显示重要流程或组件重点关注区域
扁平化边框style 子图ID stroke-width:0只有背景色的分组现代简约设计
创建标签区使用小型、简单内容的子图为图表添加标签或注释区域图表说明、图例
多彩主题为不同子图使用配色方案创建视觉上区分的功能区域复杂系统的模块划分
隐形容器subgraph none[""]
style none fill:none,stroke:none		创建不可见的组织容器控制布局但不显示边界

classDef objClass xxxxxxxx

classDef ：是关键字，代表以下要定义样式类

objClass :是自定义的类名。代表以下xxxx 的名字

样式及样式应用

基本样式定义方法
方法语法示例适用范围
内联样式style 节点ID 样式属性style A fill:#f9f,stroke:#333单个节点
样式类定义classDef 类名 样式属性classDef red fill:#f00,color:white可重用于多个节点
默认样式classDef default 样式属性classDef default fill:#f9f9f9所有未指定样式的节点
常用样式属性
类别属性名值示例支持程度说明
填充与颜色fill#f9f9fa, red, rgba(0,0,0,0.1)✅ 完全支持节点背景填充色
stroke#333, blue✅ 完全支持节点边框颜色
color#666, white✅ 完全支持文本颜色
fill-opacity0.5, 1✅ 完全支持填充透明度
stroke-opacity0.7✅ 完全支持边框透明度
opacity0.8✅ 完全支持整体透明度
边框stroke-width2px, 1.5✅ 完全支持边框粗细
stroke-dasharray5 3, 10 2✅ 完全支持虚线边框模式
stroke-linecapround, square✅ 完全支持线条端点样式
stroke-linejoinmiter, round✅ 完全支持线条连接处样式
border-radius4px, 50%✅ 完全支持边角圆润度
文本样式font-familyArial, "Times New Roman"✅ 完全支持字体
font-size16px, 1.2em✅ 完全支持字体大小
font-weightbold, normal, 500✅ 完全支持字体粗细
font-styleitalic, normal✅ 完全支持文字样式(如斜体)
text-aligncenter, left, right✅ 完全支持文本对齐方式
text-anchormiddle, start, end⚠️ 部分支持SVG文本锚点
dominant-baselinemiddle⚠️ 部分支持文本基线对齐
alignment-baselinemiddle⚠️ 部分支持文本基线对齐(替代属性)
letter-spacing1px⚠️ 部分支持字母间距
尺寸与间距width120px, 80%✅ 完全支持节点宽度
height60px✅ 完全支持节点高度
padding10px, 5px 10px✅ 完全支持内部填充间距
margin5px⚠️ 有限支持外部边距(部分场景有效)
rx5✅ 完全支持水平圆角半径(SVG)
ry5✅ 完全支持垂直圆角半径(SVG)
位置与布局x10⚠️ 有限支持在某些内部元素可用
y20⚠️ 有限支持在某些内部元素可用
text-indent5px⚠️ 部分支持文本缩进
SVG特效transformscale(1.1)⚠️ 有限支持变换(仅部分场景支持)
shape-renderingcrispEdges, geometricPrecision✅ 完全支持形状渲染方式
text-renderingoptimizeLegibility✅ 完全支持文本渲染方式
内置扩展roundedtrue✅ 完全支持Mermaid特有，设置为圆角
boldtrue✅ 完全支持Mermaid特有，设置为粗体
underlinetrue⚠️ 部分支持Mermaid特有，文本下划线
dashedtrue✅ 完全支持Mermaid特有，设置为虚线
filledtrue✅ 完全支持Mermaid特有，设置为填充
不建议使用filterblur(2px)❌ 几乎不支持SVG滤镜效果
clip-pathcircle(50%)❌ 不支持裁剪路径
maskurl(#mask)❌ 不支持蒙版效果
animationfadeIn 1s❌ 不支持动画属性

Mermaid样式中的大部分属性（如fill、stroke、color、font-weight等）直接对应于SVG/CSS中的同名属性。

底层渲染机制：

  • Mermaid首先将图表定义解析为内部数据结构

  • 然后生成SVG或HTML元素

  • 最后将样式属性应用为CSS样式

SVG与CSS结合：由于大多数Mermaid图表最终渲染为SVG，所以支持的属性也主要是SVG支持的CSS属性。

%% 应用类样式 class A,H objClass class 节点ID,节点ID 类名

样式类应用
功能语法示例说明
样式类应用(单节点)class 节点ID 类名class A important将样式应用到单个节点
样式类应用(多节点)class 节点ID,节点ID 类名class A,B,C important将同一样式应用到多个节点
节点定义时应用节点ID:::类名A[开始]:::important在定义节点的同时应用样式

title [标题文本]

标题设置

标题设置基础
功能语法示例说明
基本标题title [标题文本]title [Java消息处理流程]在图表上方添加简单标题
使用变量title 节点IDtitle titleNode["我的标题"]使用预定义节点作为标题
内置标题样式方法
方法语法示例效果
标题节点样式style title 样式属性style title fill:none,stroke:none,color:#333直接设置标题样式
标题样式类classDef titleClass 样式属性
class title titleClass		classDef titleClass fill:#f5f5f5
class title titleClass		使用样式类定义标题样式
标题节点自定义title["标题文本"]
class title 样式类		title["项目流程"]
class title myTitle		定义标题节点并应用样式

具体节点与内容

节点ID与引用
功能语法示例说明
基本IDid[文本]A[开始]使用字母作为简单ID
数字ID数字id[文本]1[第一步]使用数字作为ID
复合ID复合id[文本]start_node[开始节点]使用下划线连接的复合ID
节点重用多次使用相同IDA[开始] ... A重复使用相同ID表示同一节点
连接引用id1-->id2A-->B通过ID创建节点间连接
节点样式引用style id 样式style A fill:red通过ID应用样式
样式类引用class id 类名class A important通过ID应用预定义样式类
基本节点形状
节点形状语法示例适用场景
方形id[文本]A[方形节点]一般处理步骤、数据
圆角矩形id(文本)B(圆角节点)开始/结束、友好界面
体育场形id([文本])C([体育场形])开始/结束、触发器
子程序形id[[文本]]D[[子程序]]函数、子流程
圆柱形id[(文本)]E[(数据库)]数据库、永久存储
圆形id((文本))F((圆形))连接点、事件
非对称形id>文本]G>非对称]输入/输出、数据流
菱形id{文本}H{判断}条件判断、决策点
六边形id{{文本}}I{{预处理}}预处理、准备步骤
平行四边形id[/文本/]J[/输入/]输入、数据录入
反向平行四边形id[\文本\]K[\输出\]输出、结果展示
梯形id[/文本\]L[/梯形\]手动操作、物理过程
反向梯形id[\文本/]M[\反向梯形/]数据汇总、合并
节点间连接类型
连接类型语法示例外观
带箭头实线-->A-->B有方向的实线
无箭头实线---A---B无方向的实线
带箭头虚线-.->A-.->B有方向的虚线
无箭头虚线-.-A-.-B无方向的虚线
粗实线带箭头==>A==>B有方向的粗实线
粗实线无箭头===A===B无方向的粗实线
带文本连接`-->"文本"``A-->"处理"B`添加说明文字的连接
多段线使用多个连接A-->C-->B经过多个节点的路径
节点文本内容格式化
格式特性语法示例效果
多行文本使用<br>标签A[第一行<br>第二行]在节点内显示多行文本
文本加粗使用**文本**B[普通文本**粗体文本**]部分文本加粗显示
斜体文本使用*文本*C[普通文本*斜体文本*]部分文本斜体显示
特殊字符直接使用或转义D["特殊符号: &, #, (等"]在引号内使用特殊字符
使用表情符号直接使用emojiE[👍 成功]在文本中添加表情符号
HTML标签在双引号内使用F["<b>HTML</b>标签"]有限支持HTML格式化
使用空格在文本中直接使用G[多个 空格]保留文本中的空格

实践，另一个复杂例子

graph LR
    

    subgraph os
        app -- ListenTCP --> conn
        conn -- go func: accpet --> map_fd_conn
        conn -- go func: accpet --> map_fd_conn
        conn -- go func: accpet --> map_fd_conn
    end

    subgraph RPC_Server
        map_fd_conn -- push --> channel_fd_fd_fd_fd
    end

    subgraph Work_Pool
        channel_fd_fd_fd_fd -- mapping --> go_func_sub_accpect
        channel_fd_fd_fd_fd -- mapping --> go_func_wati
        go_func_sub_accpect -- fd --> epoller
        go_func_wati -- conn --> ...
        endpoint_fd -- rpc --> work_pool
        work_pool -- conn_create_cancel --> ...
    end

flowchart LR
    %% 定义主题配色与样式
    classDef osNodeClass fill:#d0f4de,stroke:#0b6e4f,stroke-width:2px,color:#0b6e4f,font-weight:bold,rounded
    classDef rpcNodeClass fill:#e9c46a,stroke:#e76f51,stroke-width:2px,color:#e76f51,font-weight:bold,rounded
    classDef workNodeClass fill:#caf0f8,stroke:#0077b6,stroke-width:2px,color:#03045e,font-weight:bold,rounded
    classDef connectionClass stroke:#6c757d,stroke-width:2px,color:#495057
    
    %% 子图样式
    classDef osClass fill:#f1faee,stroke:#2a9d8f,stroke-width:3px,color:#264653,font-weight:bold
    classDef rpcClass fill:#fff1e6,stroke:#f4a261,stroke-width:3px,color:#e76f51,font-weight:bold
    classDef workClass fill:#f0f6ff,stroke:#457b9d,stroke-width:3px,color:#1d3557,font-weight:bold
    
    %% 标题
    title["Go网络服务架构流程图"]
    style title fill:none,stroke:none,color:#264653,font-size:18px,font-weight:bold
    
    %% 操作系统层
    subgraph OS["操作系统网络处理层"]
        direction TB
        APP["应用程序<br>🖥️"] -->|"① 监听TCP端口<br>ListenTCP()"| CONN["网络连接管理器<br>🔌"]
        CONN -->|"② 创建goroutine<br>处理新连接<br>go func: accept()"| MAP_FD["文件描述符映射表<br>map[fd]conn<br>📋"]
        CONN -->|"② 创建goroutine<br>处理新连接<br>go func: accept()"| MAP_FD
        CONN -->|"② 创建goroutine<br>处理新连接<br>go func: accept()"| MAP_FD
    end
    
    %% RPC服务层
    subgraph RPC["RPC服务层"]
        MAP_FD -->|"③ 推送连接信息<br>push(conn)"| CHANNEL["连接通道<br>channel<br>🚇"]
    end
    
    %% 工作池层
    subgraph WORK["工作池处理层"]
        direction TB
        CHANNEL -->|"④ 映射到处理函数<br>mapping()"| FUNC_ACCEPT["连接接收处理协程<br>go func accept()<br>🔄"]
        CHANNEL -->|"④ 映射到处理函数<br>mapping()"| FUNC_WAIT["连接等待处理协程<br>go func wait()<br>⏱️"]
        
        FUNC_ACCEPT -->|"⑤ 提取文件描述符<br>fd"| EPOLLER["事件轮询器<br>epoller<br>🔍"]
        FUNC_WAIT -->|"⑥ 处理连接<br>conn"| DOTS1["后续处理流程<br>...<br>⚙️"]
        
        ENDPOINT["RPC端点<br>endpoint_fd<br>📡"] -->|"⑦ 远程调用<br>rpc()"| POOL["工作池管理器<br>work_pool<br>👥"]
        POOL -->|"⑧ 创建/取消连接<br>conn_create_cancel()"| DOTS2["连接生命周期管理<br>...<br>🔄"]
    end
    
    %% 应用样式到节点
    class APP,CONN,MAP_FD osNodeClass
    class CHANNEL rpcNodeClass
    class FUNC_ACCEPT,FUNC_WAIT,EPOLLER,DOTS1,ENDPOINT,POOL,DOTS2 workNodeClass
    
    %% 应用样式到子图
    class OS osClass
    class RPC rpcClass
    class WORK workClass
    
    %% 设置连接线样式
    linkStyle 0,1,2,3,4,5,6,7,8,9,10 stroke-width:2px
    linkStyle 0 stroke:#2a9d8f,color:#2a9d8f
    linkStyle 1,2,3 stroke:#2a9d8f,color:#2a9d8f
    linkStyle 4 stroke:#f4a261,color:#f4a261
    linkStyle 5,6 stroke:#457b9d,color:#457b9d
    linkStyle 7,8 stroke:#457b9d,color:#457b9d
    linkStyle 9,10 stroke:#457b9d,color:#457b9d

美化方案展示

方案一：分组优化版
flowchart LR
    %% 样式定义 - 用更现代的配色方案
    classDef objClass fill:#c8b6ff,stroke:#7b2cbf,stroke-width:2px,color:#240046,font-weight:bold,rounded
    classDef dataClass fill:#ffb3c6,stroke:#fe6d73,stroke-width:2px,color:#9d0208,font-weight:bold,rounded
    classDef netClass fill:#b8f2e6,stroke:#3d5a80,stroke-width:2px,color:#094074,font-weight:bold,rounded
    classDef adapterClass fill:#ffd166,stroke:#ef8354,stroke-width:2px,color:#bc4749,font-weight:bold,rounded
    classDef groupClass fill:#fafafa,stroke:#d3d3d3,stroke-width:1px,stroke-dasharray: 5 5,color:#333333
    
    %% 标题
    title["Java消息处理流程 - 分组优化版"]
    
    %% 分组
    subgraph SenderSide["发送端"]
        A[/"业务对象"/] -->|"1. createPacket()"| B["Protobuf字节数组"]
        B -->|"2. encode()"| C["带长度前缀字节数组"]
        C -->|"3. writeAndFlush()"| D[("Netty Channel")]
    end
    
    subgraph Network["网络传输层"]
        D -.->|"4. TCP传输"| E[("Netty Channel")]
    end
    
    subgraph ReceiverSide["接收端"]
        E -->|"5. decode()"| F["解析后字节数组"]
        F -->|"6. handleMessage()"| G{{"消息类型路由"}}
        G -->|"7. parsePacket()"| H[/"业务对象"/]
    end
    
    %% 应用样式
    class A,H objClass
    class B,C,F dataClass
    class D,E netClass
    class G adapterClass
    class SenderSide,ReceiverSide,Network groupClass
    
    %% 标题样式
    class title fill:none,stroke:none
方案二：渐变色主题版
flowchart LR
    %% 样式定义 - 渐变色主题
    classDef objClass fill:#d8f3dc,stroke:#2d6a4f,stroke-width:2px,color:#1b4332,font-weight:bold,rounded
    classDef dataClass fill:#b7e4c7,stroke:#40916c,stroke-width:2px,color:#081c15,font-weight:bold,rounded
    classDef netClass fill:#95d5b2,stroke:#52b788,stroke-width:2px,color:#081c15,font-weight:bold,rounded
    classDef adapterClass fill:#74c69d,stroke:#74c69d,stroke-width:2px,color:#081c15,font-weight:bold,rounded
    
    %% 节点
    A[/"发送端<br>业务对象"/] -->|"处理"| B["Protobuf<br>序列化"]
    B -->|"编码"| C["网络<br>数据包"]
    C -->|"发送"| D[("传输<br>通道")]
    
    D ==>|"网络传输"| E[("接收<br>通道")]
    
    E -->|"解码"| F["网络<br>数据包"]
    F -->|"路由"| G{{"消息<br>分发器"}}
    G -->|"反序列化"| H[/"接收端<br>业务对象"/]
    
    %% 应用样式
    class A,H objClass
    class B,C,F dataClass
    class D,E netClass
    class G adapterClass
方案三：专业图表版
flowchart TD
    %% 专业图表样式
    classDef objClass fill:#4ea8de,stroke:#1a759f,stroke-width:2px,color:white,font-weight:bold
    classDef dataClass fill:#b8c0ff,stroke:#7371fc,stroke-width:2px,color:#1e1b4b,font-weight:bold
    classDef netClass fill:#06d6a0,stroke:#0b8a7e,stroke-width:2px,color:white,font-weight:bold
    classDef adapterClass fill:#ffd60a,stroke:#ffc300,stroke-width:2px,color:#613400,font-weight:bold
    classDef edgeClass color:#364fc7,stroke-width:2px
    
    %% 标题
    title["Java消息处理流程 - 专业混合布局"]
    
    %% 发送端子图
    subgraph ClientSide["客户端处理"]
        direction LR
        S1[/"Client<br>业务对象"/]
        S2["序列化数据"]
        S3["网络包"]
        S4[("发送通道")]
        
        %% 创建边并添加序号
        S1 -->|"① 对象序列化"| S2
        S2 -->|"② 添加包头"| S3
        S3 -->|"③ 写入通道"| S4
    end
    
    %% 网络传输连接
    ClientSide ==>|"④ 网络传输"| ServerSide
    
    %% 接收端子图
    subgraph ServerSide["服务端处理"]
        direction LR
        R1[("接收通道")]
        R2["原始数据"]
        R3{{"消息路由"}}
        R4[/"Server<br>业务对象"/]
        
        %% 接收端流程
        R1 -->|"⑤ 解析包头"| R2
        R2 -->|"⑥ 识别消息类型"| R3
        R3 -->|"⑦ 对象反序列化"| R4
    end
    
    %% 应用样式
    class S1,R4 objClass
    class S2,S3,R2 dataClass
    class S4,R1 netClass
    class R3 adapterClass
    
    linkStyle 0,1,2,3,4,5,6 stroke:#364fc7,stroke-width:2px
    linkStyle 3 stroke:#ff5a5f,stroke-width:3px,stroke-dasharray: 5 5
    
    %% 标题样式
    class title fill:none,stroke:none
方案四：极简风格版
flowchart LR
    %% 极简样式定义
    classDef default fill:#f9f9f9,stroke:#666,stroke-width:1px,color:#333
    classDef objClass fill:#f8f9fa,stroke:#4361ee,stroke-width:2px,color:#3a0ca3
    classDef dataClass fill:#f8f9fa,stroke:#4895ef,stroke-width:2px,color:#4361ee
    classDef netClass fill:#f8f9fa,stroke:#4cc9f0,stroke-width:2px,color:#4895ef
    classDef adapterClass fill:#f8f9fa,stroke:#560bad,stroke-width:2px,color:#7209b7
    
    %% 简化节点
    A(["业务对象"]) --> B(["序列化数据"]) 
    B --> C(["网络数据包"])
    C --> D(["网络传输"])
    D -.-> E(["网络接收"])
    E --> F(["原始数据"])
    F --> G(["路由分发"])
    G --> H(["业务对象"])
    
    %% 应用样式
    class A,H objClass
    class B,C,F dataClass
    class D,E netClass
    class G adapterClass
方案五：深色主题版
flowchart TD
    %% 深色主题样式
    classDef default fill:#2b2d42,stroke:#8d99ae,stroke-width:1px,color:#edf2f4
    classDef objClass fill:#003049,stroke:#fcbf49,stroke-width:2px,color:#edf2f4,font-weight:bold
    classDef dataClass fill:#1d3557,stroke:#a8dadc,stroke-width:2px,color:#f1faee,font-weight:bold
    classDef netClass fill:#370617,stroke:#f48c06,stroke-width:2px,color:#ffba08,font-weight:bold
    classDef adapterClass fill:#240046,stroke:#7b2cbf,stroke-width:2px,color:#c77dff,font-weight:bold
    
    %% 背景设置
    style title fill:#1d1e2c,color:#edf2f4
    
    %% 标题
    title["Java消息处理流程 - 深色混合布局"]
    
    %% 发送端子图
    subgraph Sender["发送端"]
        direction LR
        Client[/"Client<br>业务对象"/]
        Serialize["序列化<br>数据处理"]
        Packet["网络数据包<br>封装"]
        SendChannel[("发送通道")]
        
        %% 连接
        Client ===>|"序列化"| Serialize
        Serialize ===>|"编码"| Packet
        Packet ===>|"发送"| SendChannel
    end
    
    %% 网络传输连接
    Sender -.->|"网络传输"| Receiver
    
    %% 接收端子图
    subgraph Receiver["接收端"]
        direction LR
        RecvChannel[("接收通道")]
        RawData["原始数据<br>解析"]
        Router{{"消息路由<br>分发器"}}
        Server[/"Server<br>业务对象"/]
        
        %% 接收端连接
        RecvChannel ===>|"接收"| RawData
        RawData ===>|"识别"| Router
        Router ===>|"反序列化"| Server
    end
    
    %% 应用样式
    class Client,Server objClass
    class Serialize,Packet,RawData dataClass
    class SendChannel,RecvChannel netClass
    class Router adapterClass
    
    %% 自定义连接样式
    linkStyle 0,1,2,4,5,6 stroke:#8d99ae,stroke-width:2px
    linkStyle 3 stroke:#d90429,stroke-width:3px,stroke-dasharray: 5 5
方案六：立体风格版
flowchart TD
    %% 立体风格样式
    classDef objClass fill:#d8e2dc,stroke:#9d8189,stroke-width:4px,color:#4a4e69,font-weight:bold
    classDef dataClass fill:#ffe5d9,stroke:#9d8189,stroke-width:4px,color:#4a4e69,font-weight:bold
    classDef netClass fill:#ffcad4,stroke:#9d8189,stroke-width:4px,color:#4a4e69,font-weight:bold
    classDef adapterClass fill:#f4acb7,stroke:#9d8189,stroke-width:4px,color:#4a4e69,font-weight:bold
    classDef groupClass fill:none,stroke:#9d8189,stroke-width:2px,color:#4a4e69,stroke-dasharray: 5 5
    
    %% 标题
    title["消息处理流程 - 立体混合风格"]
    
    %% 客户端子图
    subgraph Client["客户端"]
        direction LR
        A[["业务<br>对象"]] -->|"序列化"| B[["协议<br>数据"]]
        B -->|"编码"| C[["网络<br>包"]]
        C -->|"发送"| D[("传输<br>通道")]
    end
    
    %% 网络连接
    Client -.->|"网络传输"| Server
    
    %% 服务端子图
    subgraph Server["服务端"]
        direction LR
        E[("接收<br>通道")] -->|"解码"| F[["原始<br>数据"]]
        F -->|"路由"| G[["消息<br>分发"]]
        G -->|"反序列化"| H[["业务<br>对象"]]
    end
    
    %% 应用样式
    class A,H objClass
    class B,C,F dataClass
    class D,E netClass
    class G adapterClass
    class Client,Server groupClass
    
    %% 标题样式
    class title fill:none,stroke:none
    
    %% 设置边框阴影效果
    style A stroke-width:4px
    style B stroke-width:4px
    style C stroke-width:4px
    style D stroke-width:4px
    style E stroke-width:4px
    style F stroke-width:4px
    style G stroke-width:4px
    style H stroke-width:4px
方案七：科技风格版
flowchart TD
    %% 科技风格样式
    classDef objClass fill:#0b132b,stroke:#5bc0be,stroke-width:2px,color:#5bc0be,font-weight:bold
    classDef dataClass fill:#1c2541,stroke:#5bc0be,stroke-width:2px,color:#5bc0be,font-weight:bold
    classDef netClass fill:#3a506b,stroke:#5bc0be,stroke-width:2px,color:#5bc0be,font-weight:bold
    classDef adapterClass fill:#0b132b,stroke:#5bc0be,stroke-width:2px,color:#5bc0be,font-weight:bold
    
    %% 标题
    title["Java消息处理流程 - 科技混合风格"]
    
    %% 发送端子图
    subgraph SendGroup["发送处理"]
        direction LR
        A{{发送端业务对象}}
        B{序列化数据}
        C{网络封装}
        D((发送))
        
        %% 连接
        A -- 1 --> B
        B -- 2 --> C
        C -- 3 --> D
    end
    
    %% 网络传输
    SendGroup -. 4 网络传输 .-> ReceiveGroup
    
    %% 接收端子图
    subgraph ReceiveGroup["接收处理"]
        direction LR
        E((接收))
        F{数据解析}
        G{{消息路由}}
        H{{接收端业务对象}}
        
        %% 连接
        E -- 5 --> F
        F -- 6 --> G
        G -- 7 --> H
    end
    
    %% 应用样式
    class A,H objClass
    class B,C,F dataClass
    class D,E netClass
    class G adapterClass
    
    %% 标题样式
    class title fill:none,stroke:none,color:#5bc0be
方案八：新拟物风格结合版
flowchart TD
    %% 新拟物风格样式
    classDef objClass fill:#f8f9fa,stroke:#212529,stroke-width:2px,color:#212529,font-weight:bold,border-radius:10px
    classDef dataClass fill:#f8f9fa,stroke:#212529,stroke-width:2px,color:#212529,font-weight:bold,border-radius:10px
    classDef netClass fill:#f8f9fa,stroke:#212529,stroke-width:2px,color:#212529,font-weight:bold,border-radius:10px
    classDef adapterClass fill:#f8f9fa,stroke:#212529,stroke-width:2px,color:#212529,font-weight:bold,border-radius:10px
    classDef sectionClass fill:#f8f9fa,stroke:#e9ecef,stroke-width:1px,color:#212529,border-radius:4px
    
    %% 标题和背景
    title["Java消息处理流程 - 新拟物混合风格"]
    
    %% 发送端处理
    subgraph ClientSection["发送处理"]
        direction LR
        A["💼<br>业务对象"] --> B["📦<br>序列化"]
        B --> C["📨<br>数据包"]
        C --> D["📤<br>发送"]
    end
    
    %% 网络连接
    ClientSection -.-> ServerSection
    
    %% 接收端处理
    subgraph ServerSection["接收处理"]
        direction LR
        E["📥<br>接收"] --> F["🔎<br>解析"]
        F --> G["🔀<br>路由"]
        G --> H["💼<br>业务对象"]
    end
    
    %% 应用样式
    class A,H objClass
    class B,C,F dataClass
    class D,E netClass
    class G adapterClass
    class ClientSection,ServerSection sectionClass
    
    %% 标题样式
    class title fill:none,stroke:none
    
    %% 增强边框效果
    style A stroke-width:3px
    style B stroke-width:3px
    style C stroke-width:3px
    style D stroke-width:3px
    style E stroke-width:3px
    style F stroke-width:3px
    style G stroke-width:3px
    style H stroke-width:3px
方案九：优雅卡片风格
flowchart TD
    %% 卡片风格样式
    classDef default fill:#ffffff,stroke:#0077b6,stroke-width:1px,color:#023e8a
    classDef objClass fill:#caf0f8,stroke:#0077b6,stroke-width:1px,color:#03045e,font-weight:bold
    classDef dataClass fill:#ade8f4,stroke:#0077b6,stroke-width:1px,color:#03045e,font-weight:bold
    classDef netClass fill:#90e0ef,stroke:#0077b6,stroke-width:1px,color:#03045e,font-weight:bold
    classDef adapterClass fill:#48cae4,stroke:#0077b6,stroke-width:1px,color:#03045e,font-weight:bold
    classDef groupClass fill:#ffffff,stroke:#0077b6,stroke-width:1px,color:#023e8a,stroke-dasharray: 5 5
    
    %% 标题
    title["Java消息处理流程 - 卡片混合风格"]
    
    %% 客户端子图
    subgraph ClientSide["发送端流程"]
        direction LR
        A["<div style='text-align:center'><b>业务对象</b><hr/>Client</div>"]
        B["<div style='text-align:center'><b>序列化</b><hr/>Protobuf Data</div>"]
        C["<div style='text-align:center'><b>网络封装</b><hr/>Network Packet</div>"]
        D["<div style='text-align:center'><b>传输通道</b><hr/>Channel</div>"]
        
        %% 连接
        A --> B
        B --> C
        C --> D
    end
    
    %% 网络连接
    ClientSide -.-> ServerSide
    
    %% 服务端子图
    subgraph ServerSide["接收端流程"]
        direction LR
        E["<div style='text-align:center'><b>接收通道</b><hr/>Channel</div>"]
        F["<div style='text-align:center'><b>数据解析</b><hr/>Raw Data</div>"]
        G["<div style='text-align:center'><b>消息路由</b><hr/>Router</div>"]
        H["<div style='text-align:center'><b>业务对象</b><hr/>Server</div>"]
        
        %% 连接
        E --> F
        F --> G
        G --> H
    end
    
    %% 应用样式
    class A,H objClass
    class B,C,F dataClass
    class D,E netClass
    class G adapterClass
    class ClientSide,ServerSide groupClass
    
    %% 标题样式
    class title fill:none,stroke:none
方案十：蓝色专业图表增强版
flowchart TD
    %% 渐变蓝色专业样式
    classDef objClass fill:#caf0f8,stroke:#0077b6,stroke-width:2px,color:#03045e,font-weight:bold
    classDef dataClass fill:#90e0ef,stroke:#0077b6,stroke-width:2px,color:#03045e,font-weight:bold
    classDef netClass fill:#00b4d8,stroke:#0077b6,stroke-width:2px,color:white,font-weight:bold
    classDef adapterClass fill:#0077b6,stroke:#023e8a,stroke-width:2px,color:white,font-weight:bold
    
    %% 标题
    title["Java消息处理流程 - 蓝色专业混合布局"]
    
    %% 发送端子图
    subgraph SendSide["发送端处理"]
        direction LR
        %% 发送端节点
        S1[/"发送端业务对象"/]
        S2["Protobuf字节数组"]
        S3["带长度前缀的字节数组"]
        S4[("Netty Channel")]
        
        %% 发送端流程
        S1 -->|"MessageAdapter.createPacket()"| S2
        S2 -->|"NettyEncoder.encode()"| S3
        S3 -->|"Channel.writeAndFlush()"| S4
    end
    
    %% 网络传输连接
    SendSide -.->|"网络传输"| ReceiveSide
    
    %% 接收端子图
    subgraph ReceiveSide["接收端处理"]
        direction LR
        %% 接收端节点
        R1[("Netty Channel")]
        R2["解析后的字节数组"]
        R3{{"消息类型识别与路由"}}
        R4[/"接收端业务对象"/]
        
        %% 接收端流程
        R1 -->|"NettyDecoder.decode()"| R2
        R2 -->|"MessageHandler.handleMessage()"| R3
        R3 -->|"MessageAdapter.parsePacket()"| R4
    end
    
    %% 应用样式
    class S1,R4 objClass
    class S2,S3,R2 dataClass
    class S4,R1 netClass
    class R3 adapterClass
    
    %% 设置连接线样式
    linkStyle 0,1,2,4,5,6 stroke:#0077b6,stroke-width:2px
    linkStyle 3 stroke:#ff4d6d,stroke-width:3px,stroke-dasharray: 5 5
    
    %% 标题样式
    class title fill:none,stroke:none
方案十一：渐变色强调专业版
flowchart TD
    %% 紫色渐变专业样式
    classDef objClass fill:#e0c3fc,stroke:#4c1d95,stroke-width:2px,color:#4c1d95,font-weight:bold
    classDef dataClass fill:#d8bbff,stroke:#4c1d95,stroke-width:2px,color:#4c1d95,font-weight:bold
    classDef netClass fill:#8e7cc3,stroke:#4c1d95,stroke-width:2px,color:white,font-weight:bold
    classDef adapterClass fill:#7371fc,stroke:#4c1d95,stroke-width:2px,color:white,font-weight:bold
    
    %% 标题
    title["Java消息处理流程 - 渐变专业混合版"]
    
    %% 发送端子图
    subgraph SendPart["发送处理"]
        direction LR
        A[/"发送端业务对象"/]
        B["Protobuf字节数组"]
        C["带长度前缀的字节数组"]
        D[("Netty Channel")]
        
        %% 连接
        A -->|"① MessageAdapter.createPacket()"| B
        B -->|"② NettyEncoder.encode()"| C
        C -->|"③ Channel.writeAndFlush()"| D
    end
    
    %% 网络传输连接
    SendPart -. "④ 网络传输" .-> ReceivePart
    
    %% 接收端子图
    subgraph ReceivePart["接收处理"]
        direction LR
        E[("Netty Channel")]
        F["解析后的字节数组"]
        G{{"消息类型识别与路由"}}
        H[/"接收端业务对象"/]
        
        %% 连接
        E -->|"⑤ NettyDecoder.decode()"| F
        F -->|"⑥ MessageHandler.handleMessage()"| G
        G -->|"⑦ MessageAdapter.parsePacket()"| H
    end
    
    %% 应用样式
    class A,H objClass
    class B,C,F dataClass
    class D,E netClass
    class G adapterClass
    
    %% 设置连接线样式
    linkStyle 0,1,2,4,5,6 stroke:#4c1d95,stroke-width:2px
    linkStyle 3 stroke:#c77dff,stroke-width:3px,stroke-dasharray: 5 5
    
    %% 标题样式
    class title fill:none,stroke:none
方案十二：高对比度商业图表版
flowchart TD
    %% 高对比度商业样式
    classDef objClass fill:#d1d1e0,stroke:#2e4057,stroke-width:2px,color:#2e4057,font-weight:bold
    classDef dataClass fill:#e1e5f2,stroke:#2e4057,stroke-width:2px,color:#2e4057,font-weight:bold
    classDef netClass fill:#bfdbf7,stroke:#2e4057,stroke-width:2px,color:#2e4057,font-weight:bold
    classDef adapterClass fill:#1f7a8c,stroke:#022b3a,stroke-width:2px,color:white,font-weight:bold
    
    %% 标题
    title["Java消息处理流程 - 商业图表混合版"]
    
    %% 发送端子图
    subgraph Client["客户端"]
        direction LR
        ClientObj[/"发送端业务对象"/]
        Serial["Protobuf字节数组"]
        Packet["带长度前缀的字节数组"]
        SendChannel[("Netty Channel")]
        
        %% 流程
        ClientObj ====>|"MessageAdapter.createPacket()"| Serial
        Serial ====>|"NettyEncoder.encode()"| Packet
        Packet ====>|"Channel.writeAndFlush()"| SendChannel
    end
    
    %% 网络传输连接
    Client -..->|"网络传输"| Server
    
    %% 接收端子图
    subgraph Server["服务端"]
        direction LR
        RecvChannel[("Netty Channel")]
        RawData["解析后的字节数组"]
        Router{{"消息类型识别与路由"}}
        ServerObj[/"接收端业务对象"/]
        
        %% 流程
        RecvChannel ====>|"NettyDecoder.decode()"| RawData
        RawData ====>|"MessageHandler.handleMessage()"| Router
        Router ====>|"MessageAdapter.parsePacket()"| ServerObj
    end
    
    %% 样式应用
    class ClientObj,ServerObj objClass
    class Serial,Packet,RawData dataClass
    class SendChannel,RecvChannel netClass
    class Router adapterClass
    
    %% 自定义连接线
    linkStyle 0,1,2,4,5,6 stroke:#022b3a,stroke-width:2px
    linkStyle 3 stroke:#ef476f,stroke-width:3px,stroke-dasharray: 5 5
    
    %% 标题样式
    class title fill:none,stroke:none
avatar
文章
阅读
粉丝