如何在NiceGUI的Mermaid图节点中适配Font Awesome图标与文字

问题描述：在NiceGUI中创建包含Font Awesome图标的Mermaid图表时，节点内仅显示图标，文字被隐藏，确认是节点标签宽度不足导致。

解决方案 #

可以通过以下几种方式调整节点宽度，让图标和文字同时显示：

1. 为单个节点设置最小宽度 #

在Mermaid语法中使用style指令，给每个节点指定最小宽度：

from nicegui import ui

@ui.page('/')
def index_page() -> None:
    def fa_setup():
        ui.run_javascript("""
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css';
            document.head.appendChild(link);
        """)
    fa_setup()

    class State:
        def __init__(self):
            self.graph = """
                graph LR;
                A1["fa:fa-credit-card A1"];
                A2["fa:fa-server A2"];
                A1 -- |4ms| --> A2;
                // 为每个节点设置最小宽度
                style A1 min-width: 120px;
                style A2 min-width: 120px;
            """

    state = State()

    diag = ui.mermaid(content=state.graph, config={'securityLevel': 'loose', 'theme': 'classic'})
    diag.bind_content(state, 'graph')

ui.run()

2. 定义通用样式类批量应用 #

如果有多个节点，推荐用classDef定义统一的样式类，再给节点添加类名，避免重复设置：

from nicegui import ui

@ui.page('/')
def index_page() -> None:
    def fa_setup():
        ui.run_javascript("""
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css';
            document.head.appendChild(link);
        """)
    fa_setup()

    class State:
        def __init__(self):
            self.graph = """
                graph LR;
                // 定义通用节点样式
                classDef nodeStyle min-width: 120px;
                A1["fa:fa-credit-card A1"]:::nodeStyle;
                A2["fa:fa-server A2"]:::nodeStyle;
                A1 -- |4ms| --> A2;
            """

    state = State()

    diag = ui.mermaid(content=state.graph, config={'securityLevel': 'loose', 'theme': 'classic'})
    diag.bind_content(state, 'graph')

ui.run()

3. 全局CSS调整所有节点 #

如果希望所有Mermaid节点都自动适配宽度，可以添加全局CSS样式，无需修改Mermaid语法：

from nicegui import ui

@ui.page('/')
def index_page() -> None:
    def fa_setup():
        ui.run_javascript("""
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css';
            document.head.appendChild(link);
            // 添加全局CSS调整Mermaid节点宽度
            const style = document.createElement('style');
            style.textContent = `.mermaid .node rect { min-width: 120px; padding: 8px; }`;
            document.head.appendChild(style);
        """)
    fa_setup()

    class State:
        def __init__(self):
            self.graph = """
                graph LR;
                A1["fa:fa-credit-card A1"];
                A2["fa:fa-server A2"];
                A1 -- |4ms| --> A2;
            """

    state = State()

    diag = ui.mermaid(content=state.graph, config={'securityLevel': 'loose', 'theme': 'classic'})
    diag.bind_content(state, 'graph')

ui.run()

你可以根据实际需求选择合适的方法，调整min-width的值来适配不同长度的文字。

内容的提问来源于stack exchange，提问作者Anirban Nag 'tintinmj'