This is an update on this request.
In theory, Mermaid supports customizing the size of the graph (and also the elements of the graphs) using “directives”.
https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/directives.html
Unfortunately, the doc presents conflicting syntaxes. Their examples don’t work in their own live editor.
Some users have attempted modifying the look of the graph using CSS directly.
To style in the mermaid block the current way that works is to define the classes within the block itself.
For example:
graph LR;
A-->B[AAA];
B-->D;
%% Class Definitions
%% =================
class A cssClass;
classDef cssClass fill:#f9f,stroke:#333,stroke-width:4px, font-size:15px;
It appears that adding the css do the custom.css file isn’t working for the moment.
For more details see the mermaid docs: https://github.com/mermaidjs/mermaid-gitbook/blob/master/content/…
I’ve worked out a way to resize rendered Mermaid objects. Unfortunately, all of your charts have to be a similar size for it to be useful.
This would be a lot easier to handle if we had access to the scaling that is done to the rendered diagram before plopping it into its box. That behavior is a little ambiguous, since you can define font sizes and such, but they’re neglected during render.
/*
prevent the box from extending past the page width,
creating a scrollable window around only the diag…
3 Likes