marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update README.md

Browse Source 
Referring further reading to new documentation site
This commit is contained in:
Knut Sveidqvist
2014-12-31 11:32:25 +01:00
parent c8d1b388d8
commit c10b4553ae
1 changed files with 17 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
README.md
View File

@@ -1,3 +1,4 @@
mermaid [![Build Status](https://travis-ci.org/knsv/mermaid.svg?branch=master)](https://travis-ci.org/knsv/mermaid) [![Code Climate](https://codeclimate.com/github/knsv/mermaid/badges/gpa.svg)](https://codeclimate.com/github/knsv/mermaid)
=======
@@ -9,24 +10,26 @@ This is why mermaid was born, a simple markdown-like script language for generat
The code below would render the following image
<table>
<tr><th>Code</th><th>Rendered diagram</th></tr>
<tr><td>
<pre>
<code>
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
<code>
</pre>
</td>
<td>
would render this lovely chart:
<img src='http://www.sveido.com/mermaid/img/ex1.png' alt='Example 1'>
</td>
</tr>
<tr>
<td>
<pre>
<code>
sequenceDiagram
participant Alice
participant Bob
@@ -38,80 +41,28 @@ sequenceDiagram
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
</code>
</pre>
</td>
<td>
would render this lovely chart:
<img src='http://www.sveido.com/mermaid/img/seq1.png' alt='Example 2'>
</td>
</tr>
</table>
A page with a live example can be seen [here](http://www.sveido.com/mermaid/demo/html/web.html). You can also look at mermaid in action using [jsbin](http://jsbin.com/faxunexeku/1/edit?html,output). If you want a live demo, there is an editor provided in the mermaid project or you can simply look at this [great editor](http://danielmschmidt.github.io/mermaid-demo/)
# [The main documentation is located in the wiki](https://github.com/knsv/mermaid/wiki)
# Another graph example
```
graph LR;
A[Hard edge]-->|Link text|B(Round edge);
B-->C{Decision};
C-->|One|D[Result one];
C-->|Two|E[Result two];
```
Below is the new declaration of the graph which since 0.2.16 also is valid along with the old declaration of the graph as described in the graph example on the home wiki page.
```
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
![Example 2](http://www.sveido.com/mermaid/img/ex2.png)
# mermaid CLI
Installing mermaid globally (`npm install -g mermaid`) will expose the `mermaid` command to your environment, allowing you to generate PNGs from any file containing mermaid markup via the command line.
**Note:** The `mermaid` command requires [PhantomJS](http://phantomjs.org/) (version `^1.9.0`) to be installed and available in your *$PATH*, or you can specify it's location with the `-e` option. For most environments, `npm install -g phantomjs` will satisfy this requirement.
## Usage
```
$ 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
-h --help Show this message
-v --verbose Show logging
--version Print version and quit
```
## CLI Known Issues
- 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.
- SVG output is decidedly non-standard. It works, but may cause issues in some viewers.
## Further reading
* [Usage](http://knsv.github.io/mermaid/usage.html)
* [Flowchart syntax](http://knsv.github.io/mermaid/flowchart.html)
* [Sequence diagram syntax](http://knsv.github.io/mermaid/sequenceDiagram.html)
* [Mermaid client](http://knsv.github.io/mermaid/mermaidCLI.html)
# Credits
Many thanks to the [d3](http://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries! Thanks also to the [js-sequence-diagram](http://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams.
Many thanks to the [d3](http://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing
the graphical layout and drawing libraries! Thanks also to the
[js-sequence-diagram](http://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the
sequence diagrams.
*Mermaid was created by Knut Sveidqvist for easier documentation.*
Knut has not done all work by him self, here is the full list of the projects [contributors](https://github.com/knsv/mermaid/graphs/contributors).