`.mermaid-config.json` not being used

[reagle]

When I was using -F mermaid-filter it would find styling in .mermaid-config.json. That doesn't seem to be picked up by diagram and I don't see any documentation on what I might be doing wrong.

[reagle]

Additionally, setting the document's metadata doesn't seem to work either:

---
title: "The column in context"
author: "Joseph Reagle"
date: 2024-08-01
suppress-bibliography: true
diagram:
  cache: true
  engine:
    mermaid:
      mime-types: [image/svg+xml]
      theme: base
      themeVariables:
        primaryColor: "#ffffff"
        primaryTextColor: "#000000"
        primaryBorderColor: "#000000"
        lineColor: "#000000"
        secondaryColor: "#ffffff"
        tertiaryColor: "#ffffff"
---

[tarleb]

Sorry, this isn't supported yet, but it would be a good addition. Would you point me to some docs for this? I'm not really familiar with mermaid and its capabilities.

[reagle]

I'm a newbie myself and find it confusing, but I first went down that path from mermaid-filter.

Mermaid cli allows you to specify additional options in a json configuration file and a css file. mermaid-filter will look in the current working directory for .mermaid-config.json and .mermaid.css and if found, pass them in to mermaid cli.

There's also these:

• https://mermaid.js.org/config/configuration.html
• https://mermaid.js.org/config/schema-docs/config.html
• https://mermaid.js.org/config/theming.html

I would think/hope the config options would be well documented in mermaid-cli, but that doesn't seem to be the case.

[ngocptblaplafla]

I made an PR adding some common params for mmdc. With themeVariables, you can write like this example or write an json file with option cssFile
Example metadata

diagram:
  engine:
    mermaid:
      execpath: /usr/local/bin/mmdc
      theme: default
      configFile: 'some file like https://mermaid.js.org/schemas/config.schema.json'
      cssFile: your-theme-variables.json
      puppeteerConfigFile: /etc/puppeteer-conf.json

[cskeeters]

Just want to add my 2 cents here.

One important setting for flowcharts to to set htmlLabels to false. This makes the SVG export use native text and tspan instead of foreignObject. See mermaid-js/mermaid#58

Thankfully, mermaid allows for this setting and the theme to be set in the input file. That means I can configure this in each mermaid section like so:

```mermaid {caption="Every Process at Nike"}
---
config:
  theme: neutral
  flowchart:
    htmlLabels: false
---
flowchart LR
    START(Start) --> DOIT[Just Do It] --> END(End)
```

[reagle]

Thank you for the PR @ngocptblaplafla. I wonder what needs to happen next? I'd love to try it.