« Mermaid - wide graph » : différence entre les versions

De Semantic MediaWiki - Sandbox

Aucun résumé des modifications
Balise : Éditeur de wikicode 2017
(chg)
 
(6 versions intermédiaires par 2 utilisateurs non affichées)
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 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 ==
 
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 55 :
}}
}}


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 (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 à 20: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.
Les cookies nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de cookies.