mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-02-04 07:13:25 +08:00
159 lines
7.2 KiB
HTML
159 lines
7.2 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<title>mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown.</title>
|
|
<link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
|
|
|
|
<link href="stylesheets/screen.css" rel="stylesheet" type="text/css" media="screen"/>
|
|
<link href="stylesheets/print.css" rel="stylesheet" type="text/css" media="print"/>
|
|
<link href="stylesheets/mermaid.forest.css" rel="stylesheet" type="text/css"/>
|
|
<link href="stylesheets/solarized_light.css" rel="stylesheet" type="text/css"/>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
<script src="javascripts/lib/mermaid.js"></script>
|
|
<script src="javascripts/all.js" type="text/javascript"></script>
|
|
<script src="javascripts/highlight.pack.js" type="text/javascript"></script>
|
|
|
|
<script>
|
|
var g = function (hljs) {
|
|
var r = "[a-z'][a-zA-Z0-9_']*", c = "(" + r + ":" + r + "|" + r + ")";
|
|
var keyw = {
|
|
keyword: 'graph sequenceDiagram participant loop end',
|
|
typename: 'Note',
|
|
literal: "false true left right"
|
|
};
|
|
return {
|
|
case_insensitive: false,
|
|
aliases: ["mermaid"],
|
|
k: keyw,
|
|
i: 'for',
|
|
c: [{
|
|
cN: "function",
|
|
b: "^" + r + "\\s*\\(",
|
|
e: "->",
|
|
rB: !0,
|
|
i: "\\(|#|//|/\\*|\\\\|:|;",
|
|
starts: {
|
|
e: ";|\\.", k: keyw, c: [
|
|
{cN: "comment", b: "%", e: "$"}
|
|
]
|
|
}
|
|
},
|
|
{cN: "comment", b: "%", e: "$"}
|
|
]
|
|
};
|
|
};
|
|
hljs.registerLanguage('mermaid', g);
|
|
hljs.initHighlightingOnLoad();
|
|
$(function () {
|
|
setupLanguages(["shell", "javascript", "html", "css","mermaid"]);
|
|
});
|
|
var callback = function(){
|
|
alert('A callback was triggered');
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body class="index">
|
|
<a href="#" id="nav-button">
|
|
<span>
|
|
NAV
|
|
<img src="images/navbar.png"/>
|
|
</span>
|
|
</a>
|
|
|
|
<div class="tocify-wrapper">
|
|
<img src="images/logo.png"/>
|
|
|
|
<div class="lang-selector" style="display:none">
|
|
<a href="#" data-language-name="shell">shell</a>
|
|
<a href="#" data-language-name="javascript">javascript</a>
|
|
<a href="#" data-language-name="html">html</a>
|
|
<a href="#" data-language-name="css">css</a>
|
|
</div>
|
|
<div class="search">
|
|
<input type="text" class="search" id="input-search" placeholder="Search">
|
|
</div>
|
|
<ul class="search-results"></ul>
|
|
<div id="toc">
|
|
</div>
|
|
<ul class="toc-footer">
|
|
<div style="margin-left:5px;">
|
|
<a href="https://github.com/knsv/mermaid" class="github-button" >Star</a>
|
|
<a href="https://github.com/knsv/mermaid" class="github-button">Fork</a>
|
|
<a href="https://github.com/knsv/mermaid/archive/master.zip" class="github-button">Download</a>
|
|
</div>
|
|
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
|
|
<li><a href='http://github.com/tripit/slate' style="color:grey">Documentation Powered by Slate</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="page-wrapper">
|
|
<div class="dark-box"></div>
|
|
<div class="content">
|
|
<h1 id="mermaid-cli">mermaid CLI</h1>
|
|
<p>Installing mermaid globally (<code>npm install -g mermaid</code>) will expose the <code>mermaid</code> command to your environment, allowing you to generate PNGs from any file containing mermaid markup via the command line.</p>
|
|
<p><strong>Note:</strong> The <code>mermaid</code> command requires <a href="http://phantomjs.org/">PhantomJS</a> (version <code>^1.9.0</code>) to be installed and available in your <em>$PATH</em>, or you can specify it's location with the <code>-e</code> option. For most environments, <code>npm install -g phantomjs</code> will satisfy this requirement.</p>
|
|
<h2 id="usage">Usage</h2>
|
|
<pre class="css"><code>$ mermaid --help
|
|
|
|
Usage: mermaid [options] <file>...
|
|
|
|
file The mermaid description file to be rendered
|
|
|
|
Options:
|
|
-s --svg Output SVG instead of PNG (experimental)
|
|
-p --png If SVG was selected, and you also want PNG, set this flag
|
|
-o --outputDir Directory to save files, will be created automatically, defaults to `cwd`
|
|
-e --phantomPath Specify the path to the phantomjs executable
|
|
-c --sequenceConfig Specify the path to the file with the configuration to be applied in the sequence diagram
|
|
-h --help Show this message
|
|
-v --verbose Show logging
|
|
-w --width width of the generated png (number)
|
|
--version Print version and quit</code></pre><pre class="css"><code>mermaid testGraph.mmd
|
|
mermaid testGraph.mmd -w 980</code></pre><h2 id="sequence-diagram-configuration">Sequence diagram configuration</h2>
|
|
<p>The --sequenceConfig option allows overriding the sequence diagram configuration. It could be useful to increase the width between actors, the notes width or the margin to fit some large texts that are not well rendered with the default configuration, for example.</p>
|
|
<p>The content of the file must be a JSON like this:</p>
|
|
<pre class="css"><code>
|
|
{
|
|
"diagramMarginX": 100,
|
|
"diagramMarginY": 10,
|
|
"actorMargin": 150,
|
|
"width": 150,
|
|
"height": 65,
|
|
"boxMargin": 10,
|
|
"boxTextMargin": 5,
|
|
"noteMargin": 10,
|
|
"messageMargin": 35
|
|
}</code></pre><p>These properties will override the default values and if a property is not set in this object, it will left it empty and could raise an error. The current properties (measured in px) are:</p>
|
|
<ul>
|
|
<li>diagramMarginX: Size of the empty space to add at the left-right of the diagram.</li>
|
|
<li>diagramMarginY: Size of the empty space to add at the top-bottom of the diagram.</li>
|
|
<li>actorMargin: Horizontal space between each participant. The arrows between them would have this size too.</li>
|
|
<li>width: Width of the participant box.</li>
|
|
<li>height: Height of the participant box.</li>
|
|
<li>boxMargin: Blank area around loop boxes.</li>
|
|
<li>boxTextMargin: Blank area between the text and the border in a loop box.</li>
|
|
<li>noteMargin: Size of the empty space around a note.</li>
|
|
<li>messageMargin: Space between messages</li>
|
|
</ul>
|
|
<h2 id="cli-known-issues">CLI Known Issues</h2>
|
|
<ul>
|
|
<li>SVG output currently does some replacement on text, as mermaid's SVG output is only appropriate for browsers. Text color and background color is not yet replicated; please use PNGs for most purposes until this is resolved.</li>
|
|
<li>SVG output is decidedly non-standard. It works, but may cause issues in some viewers.</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
<div class="dark-box">
|
|
<div class="lang-selector">
|
|
<a href="#" data-language-name="shell">shell</a>
|
|
<a href="#" data-language-name="ruby">ruby</a>
|
|
<a href="#" data-language-name="python">python</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|