Mermaid - wide graph

→ Back to Mermaid overview

This graph will render at the default size regardless of whether it is wider than the window, and it will scroll horizontally if necessary:

Syntax

{{#mermaid:graph LR;
A["This is a very wide box"]
B["This is a very wide box"]
C["This is a very wide box"]
D["This is a very wide box"]
E["This is a very wide box"]
F["This is a very wide box"]
G["This is a very wide box"]
H["This is a very wide box"]
I["This is a very wide box"]
J["This is a very wide box"]
A-->B
B-->C
C-->D
D-->E
E-->F
F-->G
G-->H
H-->I
I-->J
|
config.flowchart.useMaxWidth = false
}}

Result

Note

Scrollbars can be added to the area, if desired, with the following CSS in MediaWiki:Common.css or elsewhere (enabled on this wiki):

.ext-mermaid > div {
	overflow: scroll;
}

This example requires the 2.2.0 release of the Mermaid extension.