mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
30 lines
1.7 KiB
Markdown
30 lines
1.7 KiB
Markdown
# Overview for n00bs
|
|
|
|
mermaid is a tool that aims to make diagrams and flowcharts for documentation, easier.
|
|
|
|
with mermaid, diagrams can be created through comments like this in a script:
|
|
|
|
```
|
|
graph TD
|
|
A[Client] --> B[Load Balancer]
|
|
B --> C[Server01]
|
|
B --> D[Server02]
|
|
```
|
|
|
|
And they are rendered into this and made part of the documentation:
|
|
|
|
|
|
|
|
Most of the similar visuals that you might need to create can be scripted in a similar way, with a varitety of different symbols and chart types available.
|
|
Since the diagram source is text based, it can be part of production scripts (and other pieces of code). So less time needs be spent on documenting as a separate task.
|
|
|
|
Comparing with Visio and similar applications, mermaid is a really fast way to create good visualizations. This is especially apparent when editing a complex visualisations, a process that usually takes hours in a desktop application, but only takes minutes (or even less if generation has been scripted) with mermaid.
|
|
|
|
mermaid can potentially cut down the amount of time and effort spent on the process of creating diagrams, to a fraction of what you usually put in.
|
|
|
|
However, a lot of the mermaid documentation is geared to professional frontend developers, presuming a skill set which I simply do not have.
|
|
|
|
If you need some basic instructions and introductions, here are a few good places to start:
|
|
|
|
For information on how to use mermaid, click [here](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted), or you can try out the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/), alternatively, you could also view the [integrations and uses](https://github.com/mermaid-js/mermaid/blob/develop/docs/integrations.md) for mermaid.
|