Create mermaid.md #15
Conversation
brownsarahm
left a comment
brownsarahm
left a comment
There was a problem hiding this comment.
This is a good start for an explore badge. If you fil in in all of these plus a little more detail about how to use it outside of github
Also the file name needs to change and it has to be linked to the _toc.yml
There was a problem hiding this comment.
putting this in the "syllabus" folder does not really make sense
|
|
||
| ## Tutorial for Using Mermaid | ||
|
|
||
| Either on the [Mermaid](https://mermaid.live/edit#pako:eNpVjstqw0AMRX9FaNVC_ANeFBq7zSbQQrPzZCFsOTMk80CWCcH2v3ccb1qtxD3nCk3Yxo6xxP4W760lUTjVJkCe96ay4gb1NJyhKN7mAyv4GPgxw_7lEGGwMSUXLq-bv18lqKbjqjGodeG6bKh69r8Cz1A3R0oa0_kvOd3jDB-N-7b5_H9ihXPrs-mp7KloSaAieSq4Q8_iyXX5_WlNDKplzwbLvHYkV4MmLNmjUePPI7RYqoy8wzF1pFw7ugj5LVx-AfLqVWg) website or in the file you're making edits to you can make complex flowcharts seamlessly. |
There was a problem hiding this comment.
this link is to a specific diagram, can you make it clean?
|
|
||
| ## What is Mermaid? | ||
|
|
||
| Mermaid is a flowchart and diagram visualization tool based on JavaScript and uses Markdown syntax to create flowcharts that are extremely dynamic and high quality. Mermaid is especially useful because you are able to display your beautiful flowcharts using backticks to create a code block. |
There was a problem hiding this comment.
can you link to the docs?
There was a problem hiding this comment.
Do you mean linking to repo? https://github.com/mermaid-js/mermaid/tree/develop/docs or our docs?
There was a problem hiding this comment.
the rendered website of the mermaid documentation
|
|
||
| Either on the [Mermaid](https://mermaid.live/edit#pako:eNpVjstqw0AMRX9FaNVC_ANeFBq7zSbQQrPzZCFsOTMk80CWCcH2v3ccb1qtxD3nCk3Yxo6xxP4W760lUTjVJkCe96ay4gb1NJyhKN7mAyv4GPgxw_7lEGGwMSUXLq-bv18lqKbjqjGodeG6bKh69r8Cz1A3R0oa0_kvOd3jDB-N-7b5_H9ihXPrs-mp7KloSaAieSq4Q8_iyXX5_WlNDKplzwbLvHYkV4MmLNmjUePPI7RYqoy8wzF1pFw7ugj5LVx-AfLqVWg) website or in the file you're making edits to you can make complex flowcharts seamlessly. | ||
|
|
||
| ### Using Code Blocks |
There was a problem hiding this comment.
this is github specific, can you make that clear.
| C -->|Three| F[fa:fa-car Car] | ||
| ``` | ||
|
|
||
| In Mermaid there are different styles for boxes with either square or round edges and the option to give a description of each item in its pipe. |
| ```mermaid | ||
| flowchart TD | ||
| A[Christmas] -->|Get money| B(Go shopping) | ||
| B --> C{Let me think} | ||
| C -->|One| D[Laptop] | ||
| C -->|Two| E[iPhone] | ||
| C -->|Three| F[fa:fa-car Car] | ||
| ``` |
There was a problem hiding this comment.
this renders in GitHub, but will not render on the course website.
There was a problem hiding this comment.
Should I link an image instead?
There was a problem hiding this comment.
No it can render on the website, but the syntax is not quite right. See the examples in the course website to find the right syntax.
2 participants
This is my first attempt at a community badge. If I did this incorrectly sorry, but I thought that this might be a good topic because I found mermaid to be really interesting. Please let me know if there's a better way to go about doing this @brownsarahm.