How to use Mermaid style settings in NiceGUI

Question

I am creating a flowchart with mermaid syntax in nicegui. I want to use the style settings %%{ init : { "theme" : "default", "flowchart" : { "curve" : "linear" }}}%%% but instead of a stylized image I get just text on the screen

from nicegui import ui

ui.mermaid('''
%%{ init : { "theme" : "default", "flowchart" : { "curve" : "linear" }}}%%


flowchart LR
    f1 --> f2
    f2 --> f3
    f2 --> f4
''')

ui.run()

The main task is to make arrows with straight corners, not curved ones

Answer 1

We just found out that these "directives" indicated with %% are deprecated, which might be a reason why the renderer breaks.

But the new configuration syntax works:

ui.mermaid('''
---
config:
    theme: default
    flowchart:
        curve: linear
---

flowchart LR
    f1 --> f2
    f2 --> f3
    f2 --> f4
''')