« Mermaid - wide graph » : différence entre les versions
De Semantic MediaWiki - Sandbox
m (Kghbln a déplacé la page Mermaid - wide graph vers Mermaid - wide graph : namefix) |
(chg) |
||
| (2 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
< | <big>→ Back to [[Mermaid|Mermaid overview]]</big> | ||
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 == | |||
<pre> | |||
{{#mermaid:graph LR; | {{#mermaid:graph LR; | ||
A["This is a very wide box"] | A["This is a very wide box"] | ||
| Ligne 21 : | Ligne 25 : | ||
H-->I | H-->I | ||
I-->J | I-->J | ||
| | |||
config.flowchart.useMaxWidth = false | |||
}} | }} | ||
</pre> | |||
== Result == | |||
{{#mermaid:graph LR; | {{#mermaid:graph LR; | ||
A["This is a very wide box"] | A["This is a very wide box"] | ||
| Ligne 50 : | Ligne 55 : | ||
}} | }} | ||
== Note == | |||
Scrollbars can be added to the area, if desired, with the following CSS in [[MediaWiki:Common.css]] or elsewhere (enabled on this wiki): | |||
<syntaxhighlight lang="css"> | |||
.ext-mermaid > div { | |||
overflow: scroll; | |||
} | |||
</syntaxhighlight> | |||
{{Callout | |||
|This example requires the [https://github.com/SemanticMediaWiki/Mermaid/releases/tag/2.2.0 2.2.0 release] of the Mermaid extension. | |||
|info | |||
}} | |||
{{Keywords|Keywords=mermaid;graph}} | |||
[[Category:Mermaid examples]] | |||
Dernière version du 7 mars 2020 à 19:15
→ 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.
