Início / coding / Perguntas / 79575076
Accepted
Anirban Nag 'tintinmj'
Asked: 2025-04-15 19:56:05 +0800 CST

Como ajustar o ícone de fonte incrível com texto nos nós do gráfico de sereia do nicegui

  • 772

Estou tentando criar um mermaidgráfico no nicegui. Consigo encaixar o ícone e o texto no nó do gráfico. Mas no navegador, só o ícone aparece. Sei que é por causa da largura do rótulo do nó. Como consertar?

foto do navegador

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;
            """

    state = State()

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

ui.run()
python

2 respostas

  1. Best Answer

    Pode não responder à sua pergunta, mas este código NiceGUI

    ui.add_head_html('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">')
ui.mermaid('''
    graph LR;
    A1["fa:fa-credit-card A1"];
    A2["fa:fa-server A2"];
    A1 -- |4ms| --> A2;
''')

    se comporta exatamente como este exemplo simples da Sereia:

    <html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>
      mermaid.initialize({ startOnLoad: true });
    </script>
  </head>
  <body>
    <div class="mermaid">graph LR; A1["fa:fa-credit-card A1"]; A2["fa:fa-server A2"]; A1 -- |4ms| --> A2;</div>
  </body>
</html>

    Então, aparentemente, o problema está em como o Mermaid renderiza nós com ícones.

    • 0

  2. Então, adicionar o classDefto specify font-familyresolve o problema.

    from nicegui import ui

@ui.page('/')
def index_page() -> None:
    def fa_setup():
        ui.add_head_html('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">')
    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;
                classDef fontAwesome font-family: FontAwesome;
                class A1,A2 fontAwesome;
            """

    state = State()

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

ui.run()

    imagem resolvida

    • 0

relate perguntas