Zettlr: [HELP WANTED] Custom Mermaid.js Styling for Zettlr

[nathanlesage]

こんばんは、

I just finished initial implementation of Mermaid. I understand that this thing is huge, and that there is a lot of flexibility with regard to the charts. I personally don't use charts (maybe I'll start now since the option is there lol), which is why I would like to ask for help!

A lot of you have requested the Mermaid feature, and I've gladly implemented it, but it needs custom styling. This has actually been mentioned somewhere on Twitter I think (?), and it's necessary. Why? Because the built-in themes don't have night mode support. See proof:

But I thought hey let's go one step further and provide a minimal base theme for that thing, using the Zettlr-internal colours and fitting the appearance into the app itself. Mostly, it should suffice that we define it once in the Berlin theme, because anything will propagate to the other themes. This would also enable users to further customise the styling using CustomCSS!

But here's where you come in: Do you use Mermaid in your daily work? Then I would like to ask you to share as many different things you can do with Mermaid so that I don't forget something and we can prevent bugs in the future!

The goal is to arrive at a full list of all things that need styling (elements, class names, and the like) and write two themes.

So in each of these steps, I gladly receive any help, whether be it deciding upon the actual styles, in sifting through the Mermaid themes to collect the info we need, or even coding the LESS into the stylesheet!

I'll be releasing another beta this week, which includes the basic mermaid support, and from then we can work together to make this happen!

Cheerio!

Resources

• Here is the link to all themes and styles that come with mermaid, which we need to override
• This file is where we need to put the custom theme, except it's too big, then we need a new file. Look out for the class "mermaid-chart"!

[maehr]

Hi @nathanlesage

I haven't used mermaid excessively yet. But here is a real example https://gist.github.com/maehr/55be6c49ac414f3ec464c2728026e56c
Till now I only used PlantUML. But I am going to ditch it in favor of mermaid and vega-light.

Cheers m

[nathanlesage]

Perfect, thanks! I'll include that in the test file! :)

[nathanlesage]

For now, I've opted for a background-color and a fixed theme simply so that the feature can be tested better. The theme can then be customised in further releases!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Zverik]

Help still wanted, I guess. Mermaid charts still look alien to the UI. Removing the stale tag.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed due to inactivity. If you believe that this issue is relevant for many users and should not be closed, feel free to comment so that the admins will be notified.