微知-mermaid的节点label中如何多行左对齐?<div style=text-align:left;>

Mermaid多行内容左对齐方法
该文章已生成可运行项目,

背景

经常要用Mermaid来梳理代码流程,涉及到多行的时候默认是中对其的,如何左对齐?

方法

Mermaid 中一些特殊格式化方式通常是通过 HTML 标签来实现。使用 div 标签来多行对其。
在Typora中用```mermaid 回车启动mermiad之后,用flowchart LR回车开启
在这里插入图片描述

多行对其方式:<div style=text-align:left;>

实操效果

未对齐

在这里插入图片描述

对其后效果

在这里插入图片描述

本文章已经生成可运行项目
graph LR subgraph Ping检测核心流程 A[线程启动] --> B{全局/端口恢复<br><b style='font-size:19px'>使能状态?</b>} B -->|"<b style='font-size:18px'>禁用</b>"| C[休眠1秒] --> B B -->|"<b style='font-size:18px'>启用</b>"| D[创建原始套接字] D --> E[等待启动延时 startup] E --> F[发送ICMP请求] F --> G{<b style='font-size:19px'>接收ICMP响应?</b>} G -->|"<b style='font-size:18px'>成功</b>"| H[重置失败计数 fail_cnt=0] H --> I[更新统计计数器] I --> J[等待间隔时间 interval] J --> F G -->|"<b style='font-size:18px'>失败/超时</b>"| K[增加失败计数 fail_cnt++] K --> L{<b style='font-size:19px'>达到阈值?<br>fail_cnt ≥ retry</b>} L -->|"<b style='font-size:18px'>否</b>"| J L -->|"<b style='font-size:18px'>是</b>"| M[断电端口] M --> N[等待重启时间 reboot] N --> O[重新上电端口] O --> P[重置失败计数] P --> B end classDef nodeStyle fill:#f0f8ff,stroke:#4682b4,stroke-width:2px,font-size:16px; classDef decisionStyle fill:#e6f7ff,stroke:#1890ff,stroke-width:2px,font-size:18px; /* 决策节点字号增大 */ class A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P nodeStyle; class B,G,L decisionStyle; /* 应用决策样式 */ style B text-align:center; style G text-align:center; style L text-align:center; Error: Error: Parse error on line 24: ...,font-size:18px /* 决策节点字号增大 */ clas -----------------------^ Expecting 'SEMI', 'NEWLINE', 'SPACE', 'EOF', 'COLON', 'STYLE', 'NUM', 'COMMA', 'NODE_STRING', 'UNIT', 'BRKT', 'PCT', got 'UNICODE_TEXT'
最新发布
10-30
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值