diff --git a/docs/About.md b/docs/About.md deleted file mode 100644 index 24ef25586..000000000 --- a/docs/About.md +++ /dev/null @@ -1,277 +0,0 @@ -# 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). - -![banner](img/header.png) - -**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/About.md) - - -[![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/Mermaid/mermaid) - - -> Doc-Rot is a Catch-22 that Mermaid helps to solve. - -Diagramming and documentation costs precious developer time and gets outdated quickly. -But not having diagrams or docs ruins productivity and hurts organizational learning.
-Mermaid addresses this Catch-22 by cutting the time, effort and tooling that is required to create modifiable diagrams and charts, for smarter and more reusable content. -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.
- -> 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](./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 [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](/flowchart?id=flowcharts-basic-syntax) - -``` -graph TD; - A-->B; - A-->C; - B-->D; - C-->D; -``` - -![Flowchart](img/flow.png) - -### [Sequence diagram](/sequenceDiagram) - -``` -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
prevail! - John-->>Alice: Great! - John->>Bob: How about you? - Bob-->>John: Jolly good! -``` - -![Sequence diagram](img/sequence.png) - -### [Gantt diagram](/gantt) - -``` -gantt -dateFormat YYYY-MM-DD -title Adding GANTT diagram to mermaid -excludes weekdays 2014-01-10 - -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 -``` - -![Gantt diagram](img/gantt.png) - -### [Class diagram - :exclamation: experimental](/classDiagram) - -``` -classDiagram -Class01 <|-- AveryLongClass : Cool -Class03 *-- Class04 -Class05 o-- Class06 -Class07 .. Class08 -Class09 --> C2 : Where am i? -Class09 --* C3 -Class09 --|> Class07 -Class07 : equals() -Class07 : Object[] elementData -Class01 : size() -Class01 : int chimp -Class01 : int gorilla -Class08 <--> C2: Cool label -``` - -![Class diagram](img/class.png) - -### Git graph - :exclamation: experimental - -``` -gitGraph: -options -{ - "nodeSpacing": 150, - "nodeRadius": 10 -} -end -commit -branch newbranch -checkout newbranch -commit -commit -checkout master -commit -commit -merge newbranch - -``` -![Git graph](img/git.png) - -### [Entity Relationship Diagram - :exclamation: experimental](/entityRelationshipDiagram) - -``` -erDiagram - CUSTOMER ||--o{ ORDER : places - ORDER ||--|{ LINE-ITEM : contains - CUSTOMER }|..|{ DELIVERY-ADDRESS : uses - -``` - -![ER diagram](img/simple-er.png) - -### [User Journey Diagram](/user-journey) - -```markdown -journey - title My working day - section Go to work - Make tea: 5: Me - Go upstairs: 3: Me - Do work: 1: Me, Cat - section Go home - Go downstairs: 5: Me - Sit down: 5: Me -``` -![Journey diagram](img/user-journey.png) - -# Installation - -**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).** - -### CDN - -``` -https://unpkg.com/mermaid@/dist/ -``` - -To select a version: - -Replace `` with the desired version number. - -Alternatively, you can also adjust the version number in the page itself. - -Latest Version: [https://unpkg.com/browse/mermaid@8.8.0/](https://unpkg.com/browse/mermaid@8.8.0/) - -## Mermaid on a website -To support mermaid on your website, all you have to do is add Mermaid’s JavaScript package - -``` -1.You will need to install node v10 or 12, which would have npm - -2. download yarn using npm. - -3. enter the following command: - yarn add mermaid - -4. You can then add mermaid as a dev dependency using this command: - yarn add --dev mermaid - -``` - -**To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaidAPI` call into the HTML like so:** -```html - - -``` -**Doing so will command the mermaid parser to look for the `
` 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) - -# Sibling projects -- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor) -- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli) -- [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo) -- [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo) - -## Request for Assistance - -Things are piling up and I have a hard time keeping up. To remedy this -it would be great if we could form a core team of developers to cooperate -with the future development of mermaid. - -As part of this team you would get write access to the repository and would -represent the project when answering questions and issues. - -Together we could continue the work with things like: - -- Adding more types of diagrams like mindmaps, ert diagrams, etc. -- Improving existing diagrams - -Don't hesitate to contact me if you want to get involved! - -## For contributors - -### Setup - -``` -yarn install -``` - -### Build - -``` -yarn build:watch -``` - -### Lint - -``` -yarn lint -``` - -We use [eslint](https://eslint.org/). -We recommend you installing [editor plugins](https://eslint.org/docs/user-guide/integrations) so you can get real time lint result. - -### Test - -``` -yarn test -``` -Manual test in browser: open `dist/index.html` - -### Release - -For those who have the permission to do so: - -Update version number in `package.json`. - -``` -npm publish -``` - -Command above generates files into the `dist` folder and publishes them to npmjs.org. - -## 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. Thanks to Jessica Peter for inspiration and starting point for gantt rendering. - -_Mermaid was created by Knut Sveidqvist for easier documentation._ - -Here is the full list of the projects [contributors](https://github.com/knsv/mermaid/graphs/contributors). diff --git a/docs/README.md b/docs/README.md index 3aa26323f..3bfb850da 100644 --- a/docs/README.md +++ b/docs/README.md @@ -6,7 +6,7 @@ Many editors, wikis and other tools have mermaid integrations already making it ![banner](img/header.png) -**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/About.md) +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md) [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/Mermaid/mermaid) @@ -37,7 +37,7 @@ For a more detailed introduction to Mermaid and some of it's more basic uses, lo **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: +# Diagrams that mermaid can render ### [Flowchart](/flowchart?id=flowcharts-basic-syntax) @@ -86,7 +86,7 @@ Future task2 : des4, after des3, 5d ![Gantt diagram](img/gantt.png) -### [Class diagram - :exclamation: experimental](/classDiagram) +### [Class diagram](/classDiagram) ``` classDiagram @@ -200,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 `
` 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 [Other examples](/examples) + **Examples can be found in** [Other examples](/examples) # Sibling projects - [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor) diff --git a/docs/Tutorials.md b/docs/Tutorials.md index 45d660a97..853d6c680 100644 --- a/docs/Tutorials.md +++ b/docs/Tutorials.md @@ -19,7 +19,7 @@ The definitions that can be generated the Live-Editor are also backwards-compati [Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8) -## Mermaid with HTML: +## Mermaid with HTML Examples are provided in [Gettting Started](n00b-gettingStarted.md) **CodePen Examples:** @@ -31,6 +31,6 @@ https://codepen.io/tdkn/pen/vZxQzd https://codepen.io/janzeteachesit/pen/OWWZKN -## Mermaid with Text Area: +## Mermaid with Text Area https://codepen.io/Ryuno-Ki/pen/LNxwgR diff --git a/docs/entityRelationshipDiagram.md b/docs/entityRelationshipDiagram.md index 28d509748..2bc8d4ebd 100644 --- a/docs/entityRelationshipDiagram.md +++ b/docs/entityRelationshipDiagram.md @@ -1,6 +1,6 @@ # Entity Relationship Diagrams -**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/entityRelationshipDiagram.md +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/entityRelationshipDiagram.md) > An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia. Note that practitioners of ER modelling almost always refer to *entity types* simply as *entities*. For example the `CUSTOMER` entity *type* would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns. diff --git a/docs/n00b-overview.md b/docs/n00b-overview.md index 18271ed8e..e44b0d5a1 100644 --- a/docs/n00b-overview.md +++ b/docs/n00b-overview.md @@ -20,7 +20,7 @@ Doc-Rot is quite quick on diagrams makes, after a change is made, it quite hard mermaid seeks to change that. mermaid is a javascript based tool that utilizes a markdown inspired syntax to generate documentation, which is actually quicker, less complicated and more convenient than most traditional diagramming software. This is a relatively straightforward solution to a major hurdle in software teams. -# :blue_book: Definition of Terms/ Dictionary +# Definition of Terms/ Dictionary **Mermaid definitions** diff --git a/docs/n00b-syntaxReference.md b/docs/n00b-syntaxReference.md index a49a7e429..f771e4af3 100644 --- a/docs/n00b-syntaxReference.md +++ b/docs/n00b-syntaxReference.md @@ -12,7 +12,7 @@ They also detail how diagrams can be defined, or described in the manner with wh **The benefits of text based diagramming are its speed and modifiability. mermaid allows for easy maintenance and modification of diagrams. This means your diagrams will always be up to date and closely follow your code and improve your documentation.** -## mermaid tag: +## mermaid tag These Diagram Definitions can be entered within a \
tag. like so : ```html diff --git a/docs/sequenceDiagram.md b/docs/sequenceDiagram.md index 0416f451b..cf6f7dcf8 100644 --- a/docs/sequenceDiagram.md +++ b/docs/sequenceDiagram.md @@ -1,5 +1,6 @@ # Sequence diagrams +**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/sequenceDiagram.md) > A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order. Mermaid can render sequence diagrams.