如何在NiceGUI中配置Mermaid样式实现直角箭头

问题分析 #

你的代码中Mermaid初始化配置后存在多余空行，导致NiceGUI的Mermaid组件无法正确解析流程图定义，同时初始化配置的格式也需要严格规范才能生效。

解决方案 #

以下三种方式均可实现直角箭头且保证流程图正常渲染：

方式1：在流程图定义时直接指定曲线样式 #

from nicegui import ui

ui.mermaid('''
flowchart LR, curve=linear
    f1 --> f2
    f2 --> f3
    f2 --> f4
''')

ui.run()

方式2：修正初始化配置的格式（无多余空行） #

from nicegui import ui

ui.mermaid('''
%%{init: {"theme": "default", "flowchart": {"curve": "linear"}}}%%
flowchart LR
    f1 --> f2
    f2 --> f3
    f2 --> f4
''')

ui.run()

方式3：使用linkStyle全局设置曲线样式 #

from nicegui import ui

ui.mermaid('''
flowchart LR
    f1 --> f2
    f2 --> f3
    f2 --> f4
    linkStyle all curve:linear;
''')

ui.run()

关键注意点 #

• Mermaid语法对格式敏感，初始化配置块后不要留过多空行，需紧跟流程图定义
• 直角箭头的核心是设置curve:linear，三种方式任选其一即可满足需求

内容的提问来源于stack exchange，提问作者M0tvey