« 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)
Ligne 1 : Ligne 1 :
<!--<templatestyles src="Wide Mermaid Graph/style.css" />-->
<big>→ Back to [[Mermaid|Mermaid overview]]</big>
When initially rendered, this graph will fit the width of the window, scaling down if necessary:
 
This example requires the [https://github.com/SemanticMediaWiki/Mermaid/releases/tag/2.2.0 2.2.0 release] of the Mermaid extension.
 
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 27 :
H-->I
H-->I
I-->J
I-->J
|
config.flowchart.useMaxWidth = false
}}
}}
</pre>


 
== Result ==
 
When [https://github.com/SemanticMediaWiki/Mermaid/pull/41 pull request 41] is applied, this graph will render at the default size regardless of whether it is wider than the window, and it will scroll horizontally necessary:
{{#mermaid:graph LR;
{{#mermaid:graph LR;
A["This is a very wide box"]
A["This is a very wide box"]
Ligne 50 : Ligne 57 :
}}
}}


Without the pull request being applied, the second graph will not render.
== Note ==
Scrollbars can be added to the area, if desired, with the following CSS in MediaWiki:Common.css (or elsewhere):
 
<syntaxhighlight lang="css">
.ext-mermaid > div {
overflow: scroll;
}
</syntaxhighlight>
 
{{Keywords|Keywords=mermaid;graph}}
 
[[Category:Mermaid examples]]

Version du 7 mars 2020 à 20:07

→ Back to Mermaid overview

This example requires the 2.2.0 release of the Mermaid extension.

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):

.ext-mermaid > div {
	overflow: scroll;
}
Les cookies nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de cookies.