core(mermaid): allow greater customization

[ianchi]

Adds greater style customization by allowing a custom frontmatter config. This allows to set a theme and look or to adjust theme by setting themeVariables

Example:

node_colors = NodeStyles(
    default="fill:#e2e2e2,line-height:1.2,stroke:#616161",
    first="fill:#cfeab8,fill-opacity:0",
    last="fill:#eac3b8",
)

frontmatter_config = {
    "config": {
        "theme": "neutral",
        "look": "handDrawn"
    }
}

graph.get_graph().draw_mermaid_png(node_colors=node_colors, frontmatter_config=frontmatter_config)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
langchain	⬜️ Ignored (Inspect)	Visit Preview		Mar 21, 2025 10:18pm

[vbarda]

@ianchi thanks for the contribution! could you please separate the subgraph fix into a separate PR and add a test for it in libs/core/tests/runnables/test_graph.py?

[ianchi]

Done.
The fix has been moved to PR #29970

Just a warning. Doing it in two separate PR brings a problem. If both were merged tests would fail.
This PR changes single quotes to double quotes in INIT directive (as that is what is generated by json.dumps, and is a valid directive). All tests are adjusted in this PR, but the new test in PR #29970 doesn't exist yet for this PR so it cannot be changed.

One of the PR should be ammended after the other is merged.

[vbarda]

thanks! I merged the fix PR - feel free to update

[ianchi]

hi @vbarda the PR has conflicts resolved

[ianchi]

Hi @vbarda, I believe this is ready to be merged.
If you find anything else is needed please let me know.

[vbarda]

@ianchi thanks! i might actually do a slightly different refactor, since looks like directives are actually deprecated now so might as well go w/ the new recommended format https://mermaid.js.org/config/directives.html

[ianchi]

Hi @vbarda I've updated to use frontmatter.
Tests need to be rewritten, but first I wanted to check with you.

[vbarda]

@ianchi i was looking more at mermaid docs and it looks like frontmatter is really poorly documented. i think we can keep your original change! sorry for the false alarm

[ianchi]

It is not well documented, but basically in the config property of the front matter you include the same as in directives.
The documentation for directive is valid for "config".

It is not a bad idea to use front matter, if you use the live playground it is what is generated, so it is easy to copy from there.

[vbarda]

@ianchi fair point - i didn't have any other concerns besides that, so you can go ahead w/ updating tests :) thanks!

[ianchi]

Hi @vbarda, updated tests.

[vbarda]

Thank you @ianchi - made a few small changes and will merge!