Add hint on "flowchart" and "graph"

[koppor]

:bookmark_tabs: Summary

This PR changes two things:

Add hint on graph

The documentation on flowcharts uses flowchart

When opening the live editor (https://mermaid.live/), it uses graph for a flow chart

The documentation contains the hint on graph only in "Other examples":

Reformat notes

Currently, notes are formatted using **Note:**. According to https://vitepress.vuejs.org/guide/markdown#custom-containers, it is possible to have other stylings:

This PR uses that for the flowchart description.

:straight_ruler: Design Decisions

• Consistency of tooling and documentation
• Using available styling syntax to provide a nicer rendering

:clipboard: Tasks

Make sure you

• [x] :book: have read the contribution guidelines
• [ ] :computer: have added unit/e2e tests (if appropriate)
• [x] :notebook: have added documentation (if appropriate)
• [x] :bookmark: targeted develop branch

[sidharthv96]

Graph has been replaced with Flowchart in https://github.com/mermaid-js/mermaid-live-editor/pull/654 Also, I just added the formatting rules into Contributing.md https://github.com/mermaid-js/mermaid/commit/4ed6ec1a4dd4d406f1bb28551fcca19f84bb19c4. Can you please update the PR?

[koppor]

Updated 😅

From https://github.com/mermaid-js/mermaid/commit/4ed6ec1a4dd4d406f1bb28551fcca19f84bb19c4 I see that

```note

is converted to > **Note:**<br> and not ::: note<br>. I assume, this is intended as you aim for a light highlight of that content?

[sidharthv96]

@koppor it converts based on the output format. Default output is github markdown, which uses the ** syntax. When building for vitepress, it'll convert to ::: format.

[koppor]

@sidharthv96 I resolved the conflicts again. Should I change something more?

[sidharthv96]

@koppor we have note, tip, danger and warning.

info is not supported. note will be transformed to info when building the vitepress docs. So, don't worry.

[koppor]

@sidharthv96 Fixed.

[mermaid-bot[bot]]

@koppor, Thank you for the contribution! You are now eligible for a year of Premium account on MermaidChart. Sign up with your GitHub account to activate.