Docs: update Getting Started page #5112
Conversation
✅ Deploy Preview for mermaid-js ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
huynhicode
requested review from
knsv,
sidharthv96,
aloisklink,
ashishjain0512,
jgreywolf and
pbrolin47
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #5112 +/- ##
==========================================
- Coverage 79.78% 75.95% -3.83%
==========================================
Files 164 164
Lines 13820 13820
Branches 693 693
==========================================
- Hits 11026 10497 -529
- Misses 2644 3161 +517
- Partials 150 162 +12
Flags with carried forward coverage won't be shown. Click here to find out more. |
There was a problem hiding this comment.
Looks good to me!
Feel free to merge once you fix the broken links (you can ignore Link Checker failures that aren't related to your changes).
| 1. [Using the Mermaid Chart Editor](getting-started.html#_1-using-the-mermaid-chart-editor) | ||
| 1. [Using the Mermaid Live Editor](getting-started.html#_1-using-the-mermaid-chart-editor) | ||
| 1. [Using Mermaid Plugins and Integrations](getting-started.html#_3-using-mermaid-plugins) | ||
| 1. [Calling the Mermaid JavaScript API](getting-started.html#_4-calling-the-mermaid-javascript-api) | ||
| 1. [Adding Mermaid as a dependency](getting-started.html#_5-adding-mermaid-as-a-dependency) |
There was a problem hiding this comment.
We should prefer linking to .md instead of .html, so that the docs still work in markdown, but because these links are in the same file, we don't need them at all!
Also, the live editor link is pointing to the wrong place.
I've also updated the numbering, since although Markdown will automatically output the correct numbers, there are some users that will read the raw text, so we should the correct numbers there too.
| 1. [Using the Mermaid Chart Editor](getting-started.html#_1-using-the-mermaid-chart-editor) | |
| 1. [Using the Mermaid Live Editor](getting-started.html#_1-using-the-mermaid-chart-editor) | |
| 1. [Using Mermaid Plugins and Integrations](getting-started.html#_3-using-mermaid-plugins) | |
| 1. [Calling the Mermaid JavaScript API](getting-started.html#_4-calling-the-mermaid-javascript-api) | |
| 1. [Adding Mermaid as a dependency](getting-started.html#_5-adding-mermaid-as-a-dependency) | |
| 1. [Using the Mermaid Chart Editor](#_1-using-the-mermaid-chart-editor) | |
| 2. [Using the Mermaid Live Editor](#_2-using-the-mermaid-live-editor) | |
| 3. [Using Mermaid Plugins and Integrations](#_3-using-mermaid-plugins) | |
| 4. [Calling the Mermaid JavaScript API](#_4-calling-the-mermaid-javascript-api) | |
| 5. [Adding Mermaid as a dependency](#_5-adding-mermaid-as-a-dependency) |
|
|
||
| ## 1. Using the Live Editor | ||
| <br /> |
There was a problem hiding this comment.
I'm not a super big fan of these <br /> (or adding any HTML to markdown files). It does make the generated website look nicer, though, so I see a reason for leaving them in.
Maybe I'm biased since I normally spend most of my time reading these docs in plain text 😆
| ### Mermaid Plugins | ||
|
|
||
| You can generate Mermaid diagrams from within popular applications using plug-ins. | ||
|
|
There was a problem hiding this comment.
Should we mention the most common use-case of mermaid here, which is probably GitHub's/GitLab's integration?
| For many apps that support markdown (e.g. [GitHub][] and [GitLab][]), you can add mermaid diagrams to markdown by making a `mermaid` code block, like so: | |
| ````markdown | |
| The following code-block will be rendered as a mermaid diagram: | |
| ```mermaid | |
| flowchart LR | |
| Hello --> World | |
| ``` | |
| ```` | |
| [GitHub]: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams | |
| [GitLab]: https://docs.gitlab.com/ee/user/markdown.html#mermaid | |
docs/intro/getting-started.md
Outdated
|
|
||
| - [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt) | ||
| - [JetBrains IDE](https://docs.mermaidchart.com/plugins/jetbrains-ide) | ||
| - [Microsoft PowerPoint & Word](https://docs.mermaidchart.com/plugins/microsoft-office) |
📑 Summary
This PR contains updates to the Getting Started page:
Resolves # n/a
📏 Design Decisions
Design decisions are made by the Mermaid Chart team.
📋 Tasks
Make sure you
MERMAID_RELEASE_VERSIONis used for all new features.developbranch