mirror of
https://github.com/mermaid-js/mermaid.git
synced 2024-09-12 04:22:50 +02:00
175 lines
8.2 KiB
HTML
175 lines
8.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">mermaid</h1>
|
|
<p><img src="images/header.png" alt="Alt text"></p>
|
|
<blockquote>
|
|
<p>Generation of diagrams and flowcharts from text in a similar manner as markdown.</p>
|
|
</blockquote>
|
|
<p>Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?</p>
|
|
<p>This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript. <a href="http://knsv.github.io/mermaid/live_editor">Try it using our editor</a>.</p>
|
|
<p>Code examples below:</p>
|
|
<h3 id="an-example-of-a-flowchart">An example of a flowchart</h3>
|
|
<pre class="css"><code>graph TD;
|
|
A-->B;
|
|
A-->C;
|
|
B-->D;
|
|
C-->D;</code></pre><h3 id="an-example-of-a-sequence-diagram">An example of a sequence diagram</h3>
|
|
<pre class="css"><code>sequenceDiagram
|
|
participant Alice
|
|
participant Bob
|
|
Alice->John: Hello John, how are you?
|
|
loop Healthcheck
|
|
John->John: Fight against hypochondria
|
|
end
|
|
Note right of John: Rational thoughts <br/>prevail...
|
|
John-->Alice: Great!
|
|
John->Bob: How about you?
|
|
Bob-->John: Jolly good!</code></pre><h3 id="example-code-for-a-gantt-diagram">Example code for a gantt diagram</h3>
|
|
<pre class="css"><code>gantt
|
|
dateFormat YYYY-MM-DD
|
|
title Adding GANTT diagram functionality to mermaid
|
|
section A section
|
|
Completed task :done, des1, 2014-01-06,2014-01-08
|
|
Active task :active, des2, 2014-01-09, 3d
|
|
Future task : des3, after des2, 5d
|
|
Future task2 : des4, after des3, 5d
|
|
section Critical tasks
|
|
Completed task in the critical line :crit, done, 2014-01-06,24h
|
|
Implement parser and jison :crit, done, after des1, 2d
|
|
Create tests for parser :crit, active, 3d
|
|
Future task in critical line :crit, 5d
|
|
Create tests for renderer :2d
|
|
Add to mermaid :1d</code></pre><p>Play with mermaid using this <a href="http://danielmschmidt.github.io/mermaid-demo/">editor</a> or this <a href="live_editor">live editor</a>.</p>
|
|
<h2 id="credits">Credits</h2>
|
|
<p>Many thanks to the <a href="http://d3js.org/">d3</a> and <a href="https://github.com/cpettitt/dagre-d3">dagre-d3</a> projects for providing<br>the graphical layout and drawing libraries! Thanks also to the<br><a href="http://bramp.github.io/js-sequence-diagrams">js-sequence-diagram</a> project for usage of the grammar for the<br>sequence diagrams.</p>
|
|
<p><em>Mermaid was created by Knut Sveidqvist for easier documentation.</em></p>
|
|
<p>Knut has not done all work by himself, here is the full list of the projects <a href="https://github.com/knsv/mermaid/graphs/contributors">contributors</a>.</p>
|
|
<h1 id="downstream-projects">Downstream projects</h1>
|
|
<p>Mermaid is supported in a number of publishing systems and editors. Please report if a plugin/editor is missing from the list below:</p>
|
|
<ul>
|
|
<li>Support in LightPaper 1.2+. <a href="https://github.com/42Squares/LightPaper/blob/master/doc/Adding%20Mermaid%20Diagrams.md">Howto</a>. Discout with code MERMAID_25</li>
|
|
<li><a href="https://github.com/JozoVilcek/gitbook-plugin-mermaid">gitbook-plugin</a></li>
|
|
<li>light table</li>
|
|
<li><a href="https://marketplace.atlassian.com/plugins/org.anvard.atlassian.mermaid-plugin/server/overview">Confluence plugin</a></li>
|
|
<li><a href="http://nauvalatmaja.com/2015/01/13/rendering-mermaid-in-docpad/">Using mermaid via docpad</a></li>
|
|
<li><a href="https://rubygems.org/gems/jekyll-mermaid/versions/1.0.0">Using mermaid in Jekyll</a></li>
|
|
<li><a href="http://mostlyblather.com/blog/2015/05/23/mermaid-jekyll-octopress/">Using mermaid via Octopress</a></li>
|
|
<li><a href="http://pad.haroopress.com/user.html">Mardown editor Haroopad</a></li>
|
|
<li><a href="https://atom.io/packages/atom-mermaid">Plugin for atom</a></li>
|
|
</ul>
|
|
<h1 id="online-live-editor">Online live editor</h1>
|
|
<p>An editor is available for creating diagrams. With it you can quickly start writing mermaid diagrams. It is possible to:</p>
|
|
<ul>
|
|
<li>save the result as a svg</li>
|
|
<li>get a link to a viewer of the diagram </li>
|
|
<li><p>get a link to edit of the diagram to share a diagram so that someone else can tweak it and send a new link back</p>
|
|
</li>
|
|
<li><p><a href="http://knsv.github.io/mermaid/live_editor">Editor</a></p>
|
|
</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>
|