折腾：
【未解决】Mac中用印象笔记的Markdown画iOS返回前一页的流程图
期间，发现印象笔记中Markdown，对于此处的graph，显示效果不够好，有点乱。
且经过尝试不支持flowchart。所以去换用VSCode中Markdown试试效果。
经过稍微调整，代码：
```mermaid
flowchart TB
subgraph 核心流程
Start((启动iOS设备)) --> WdaInitDevice(wda初始化设备)
WdaInitDevice --> GetPageXmlSource(获取页面xml源码)
GetPageXmlSource --> IsTypicalBackButton{是典型返回按钮 ?}
IsTypicalBackButton --是--> ClickBackButton(点击返回按钮)
IsTypicalBackButton --否--> IsNameLabelContainBack{name和label包含返回 ?}
FixPositionDetect --左上角固定位置--> ClickBackButton
ClickBackButton(点击返回按钮) --> End((结束测试))
end
subgraph 非典型返回按钮检测
IsNameLabelContainBack --是--> ClickBackButton
IsNameLabelContainBack --否--> IsFullScreenBack{是否是全屏返回类按钮 ?}
IsFullScreenBack --是--> ClickBackButton
IsFullScreenBack --否--> IsMiniprogramOther{是否是小程序类Other类按钮 ?}
IsMiniprogramOther --是--> ClickBackButton
IsMiniprogramOther --否--> FixPositionDetect(兜底通用逻辑)
end
style Start fill:#FEF9E7,stroke-width:2px
style End fill:#FEF9E7,stroke-width:2px
style ClickBackButton fill:#52BE80,stroke-width:2px
```
效果：
然后可以输出图片：
拷贝过来看看：
效果貌似很不错：
至少看起来不挤在一起，不乱。
虽然颜色自定义没了。。。
先简单看看颜色自定义
不行的话，也就算了。
然后重点是逻辑的优化。
【部分解决】VSCode中Markdown插件Markdown Preview Enhanced中mermaid的graph中元素自定义颜色
目前暂时代码是：
```mermaid
flowchart TB
subgraph 核心流程
Start((启动iOS设备)) --> WdaInitDevice(wda初始化设备)
WdaInitDevice --> GetPageXmlSource(获取页面xml源码)
GetPageXmlSource --> IsTypicalBackButton{是典型返回按钮 ?}
IsTypicalBackButton --是--> ClickBackButton(点击返回按钮)
IsTypicalBackButton --否--> IsNameLabelContainBack{name和label包含返回 ?}
FixPositionDetect --左上角固定位置--> ClickBackButton
ClickBackButton(点击返回按钮) --> End((结束测试))
end
subgraph 非典型返回按钮检测
IsNameLabelContainBack --是--> ClickBackButton
IsNameLabelContainBack --否--> IsFullScreenBack{是否是全屏返回类按钮 ?}
IsFullScreenBack --是--> ClickBackButton
IsFullScreenBack --否--> IsMiniprogramOther{是否是小程序类Other类按钮?}
IsMiniprogramOther --是--> ClickBackButton
IsMiniprogramOther --否--> FixPositionDetect(兜底通用逻辑)
end
%% 定义样式类
classDef default fill:#E5E8E8,stroke:#333,stroke-width:2px;
%% 应用样式类，但markdown里会语法报错
%%class Start default
style Start fill:#FEF9E7,stroke-width:2px
style End fill:#FEF9E7,stroke-width:2px
style ClickBackButton fill:#52BE80,stroke-width:2px
```效果是：
目前基本算解决了。
剩下的就是去优化流程里的业务逻辑了。
不过发现想要实现subgraph，比较麻烦。暂时就不优化了。
然后继续优化界面显示效果
发现加上\n可以换行，可以使得上面显示很大的 菱形◇ 可以变得小不少，好看些，不那么突兀：
```mermaid
flowchart TB
subgraph 核心流程
Start((启动iOS设备)) --> WdaInitDevice(wda初始化设备)
WdaInitDevice --> GetPageXmlSource(获取页面xml源码)
GetPageXmlSource --> IsTypicalBackButton{是典型的\n返回按钮 ?}
IsTypicalBackButton --是--> ClickBackButton(点击返回按钮)
IsTypicalBackButton --否--> IsNameLabelContainBack{name和label\n包含返回 ?}
FixPositionDetect --左上角固定位置--> ClickBackButton
ClickBackButton --> End((结束测试))
end
subgraph 非典型返回按钮检测
IsNameLabelContainBack --是--> ClickBackButton
IsNameLabelContainBack --否--> IsFullScreenBack{是全屏类\n返回按钮 ?}
IsFullScreenBack --是--> ClickBackButton
IsFullScreenBack --否--> IsMiniprogramOther{是小程序\nOther类\n返回按钮?}
IsMiniprogramOther --是--> ClickBackButton
IsMiniprogramOther --否--> FixPositionDetect(兜底通用逻辑)
end
%% 定义样式类
classDef default fill:#E5E8E8,stroke:#333,stroke-width:2px;
%% 应用样式类，但markdown里会语法报错
%%class Start default
style Start fill:#FEF9E7,stroke-width:2px
style End fill:#FEF9E7,stroke-width:2px
style ClickBackButton fill:#52BE80,stroke-width:2px
```效果：
转载请注明：在路上 » 【基本解决】VSCode中用Markdown画iOS返回前一页的流程图graph和flowchart