mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-10-08 08:39:38 +02:00
Updated the docs, updated the sections and fixed some bad links
This commit is contained in:
Knut Sveidqvist
@@ -1,18 +1,17 @@
|
||||
# mermaid [](https://travis-ci.org/mermaid-js/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://percy.io/Mermaid/mermaid)
|
||||
# About Mermaid
|
||||
|
||||
**Mermaid lets you represent diagrams using text and code.** This simplifies maintianing complex diagrams. It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. The main purpose of Mermaid is to help Documentation catch up with Development.
|
||||
|
||||
Many editors, wikis and other tools have mermaid integrations already making it easy to start using mermaid. A few of those are described in [Simple start to write diagrams](./n00b-GettingStarted.md).
|
||||
|
||||
|
||||
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md)
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/About.md)
|
||||
|
||||
:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**
|
||||
|
||||
**Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏**
|
||||
|
||||
## About
|
||||
[](https://travis-ci.org/mermaid-js/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://percy.io/Mermaid/mermaid)
|
||||
|
||||
<!-- <Main description> -->
|
||||
Mermaid simplifies complex diagrams. It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. The main purpose of Mermaid is to help Documentation catch up with Development.
|
||||
|
||||
> Doc-Rot is a Catch-22 that Mermaid helps to solve.
|
||||
|
||||
Diagramming and documentation costs precious developer time and gets outdated quickly.
|
||||
@@ -21,21 +20,26 @@ Mermaid addresses this Catch-22 by cutting the time, effort and tooling that is
|
||||
Mermaid, as a text-based diagramming tool allows for quick and easy updates, it can also be made part of production scripts (and other pieces of code), to make documentation much easier.
|
||||
With Mermaid less time needs to be spent on making diagrams, as a separate documentation task. <br/>
|
||||
|
||||
> Mermaid is a Diagramming tool for everyone.
|
||||
> Mermaid is a Diagramming tool for everyone.
|
||||
|
||||
Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor), Visit the [Tutorials Page](https://github.com/mermaid-js/mermaid/blob/develop/docs/Tutorials.md) for the Live Editor video tutorials.
|
||||
Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor), Visit the [Tutorials Page](./Tutorials.md) for the Live Editor video tutorials.
|
||||
|
||||
Want to see what can be built with mermaid, or what applications already support it? Read the [Integrations and Usages for Mermaid](./integrations.md).
|
||||
|
||||
For a more detailed introduction to Mermaid and some of it's more basic uses, look to the [Beginner's Guide](./n00b-overview.md) and [Usage](./usage.md).
|
||||
For a more detailed introduction to Mermaid and some of it's more basic uses, look to the [Overview for Beginners](./n00b-overview.md) and [Usage](./usage.md).
|
||||
|
||||
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 📜 [Version Log](./CHANGELOG.md)
|
||||
|
||||
> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
|
||||
|
||||
:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**
|
||||
|
||||
**Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏**
|
||||
|
||||
|
||||
# Diagrams that mermaid can render:
|
||||
|
||||
### [Flowchart](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/flowchart.html)
|
||||
### [Flowchart](/flowchart?id=flowcharts-basic-syntax)
|
||||
|
||||
```
|
||||
graph TD;
|
||||
@@ -47,7 +51,7 @@ graph TD;
|
||||
|
||||
|
||||
|
||||
### [Sequence diagram](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/sequenceDiagram.html)
|
||||
### [Sequence diagram](/sequenceDiagram)
|
||||
|
||||
```
|
||||
sequenceDiagram
|
||||
@@ -65,7 +69,7 @@ sequenceDiagram
|
||||
|
||||
|
||||
|
||||
### [Gantt diagram](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/gantt.html)
|
||||
### [Gantt diagram](/gantt)
|
||||
|
||||
```
|
||||
gantt
|
||||
@@ -82,7 +86,7 @@ Future task2 : des4, after des3, 5d
|
||||
|
||||
|
||||
|
||||
### [Class diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/classDiagram.html)
|
||||
### [Class diagram - :exclamation: experimental](/classDiagram)
|
||||
|
||||
```
|
||||
classDiagram
|
||||
@@ -126,7 +130,7 @@ merge newbranch
|
||||
```
|
||||
|
||||
|
||||
### [Entity Relationship Diagram - :exclamation: experimental](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/entityRelationshipDiagram.html)
|
||||
### [Entity Relationship Diagram - :exclamation: experimental](/entityRelationshipDiagram)
|
||||
|
||||
```
|
||||
erDiagram
|
||||
@@ -138,7 +142,7 @@ erDiagram
|
||||
|
||||
|
||||
|
||||
### [User Journey Diagram](https://mermaid-js.github.io/mermaid/diagrams-and-syntax-and-examples/user-journey.html)
|
||||
### [User Journey Diagram](/user-journey)
|
||||
|
||||
```markdown
|
||||
journey
|
||||
@@ -155,9 +159,9 @@ journey
|
||||
|
||||
# Installation
|
||||
|
||||
**In depth guides and examples can be found in [Getting Started](./n00b-gettingStarted.md) and [Usage](./usage.md).**
|
||||
**In depth guides and examples can be found in [Getting Started](/n00b-gettingStarted) and [Usage](/usage).**
|
||||
|
||||
**It would also be helpful to learn more about mermaid's [Syntax](./n00b-syntaxReference.md).**
|
||||
**It would also be helpful to learn more about mermaid's [Syntax](/n00b-syntaxReference).**
|
||||
|
||||
### CDN
|
||||
|
||||
@@ -196,7 +200,7 @@ To support mermaid on your website, all you have to do is add Mermaid’s JavaSc
|
||||
```
|
||||
**Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"` in your HTML Document. From these tags mermaid will try to read the diagram/chart definitons and render them as svg charts.**
|
||||
|
||||
## Examples can be found in [Getting Started](./n00b-gettingStarted.md)
|
||||
## Examples can be found in [Other examples](/examples)
|
||||
|
||||
# Sibling projects
|
||||
- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
|
||||
@@ -270,6 +274,4 @@ Thanks also to the [js-sequence-diagram](http://bramp.github.io/js-sequence-diag
|
||||
|
||||
_Mermaid was created by Knut Sveidqvist for easier documentation._
|
||||
|
||||
_[Tyler Long](https://github.com/tylerlong) has became a collaborator since April 2017._
|
||||
|
||||
Here is the full list of the projects [contributors](https://github.com/knsv/mermaid/graphs/contributors).
|
||||
|
||||
Reference in New Issue
Block a user