Github README with diagram using mermaid

Want to add diagrams in your github .md files to tell the flow of your system or the flow of each component talking to each other ? Today I just found something useful worth to share and lets just dive in with some examples.

Flowchart

“`

merm…


This content originally appeared on DEV Community and was authored by Vincent Villaluna

Want to add diagrams in your github .md files to tell the flow of your system or the flow of each component talking to each other ? Today I just found something useful worth to share and lets just dive in with some examples.

Flowchart

    ```

mermaid
        flowchart TD;

        A[Process] --> B{Condition?};
        B -- Yes --> C[Another Process];
        B -- No --> D[Exit Process];
        C ----> E{Another Condition?};
        E -- Yes --> F[Etc...];
        E -- No --> G[Etc...];


    ```

Each Letters before nodes represents as their id's so when you call A ----> B means node A will point to node B.

Output:

github

More diagram examples here Mermaid Documentation
Other sources github-blog


This content originally appeared on DEV Community and was authored by Vincent Villaluna


Print Share Comment Cite Upload Translate Updates
APA

Vincent Villaluna | Sciencx (2022-02-15T02:30:01+00:00) Github README with diagram using mermaid. Retrieved from https://www.scien.cx/2022/02/15/github-readme-with-diagram-using-mermaid/

MLA
" » Github README with diagram using mermaid." Vincent Villaluna | Sciencx - Tuesday February 15, 2022, https://www.scien.cx/2022/02/15/github-readme-with-diagram-using-mermaid/
HARVARD
Vincent Villaluna | Sciencx Tuesday February 15, 2022 » Github README with diagram using mermaid., viewed ,<https://www.scien.cx/2022/02/15/github-readme-with-diagram-using-mermaid/>
VANCOUVER
Vincent Villaluna | Sciencx - » Github README with diagram using mermaid. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/02/15/github-readme-with-diagram-using-mermaid/
CHICAGO
" » Github README with diagram using mermaid." Vincent Villaluna | Sciencx - Accessed . https://www.scien.cx/2022/02/15/github-readme-with-diagram-using-mermaid/
IEEE
" » Github README with diagram using mermaid." Vincent Villaluna | Sciencx [Online]. Available: https://www.scien.cx/2022/02/15/github-readme-with-diagram-using-mermaid/. [Accessed: ]
rf:citation
» Github README with diagram using mermaid | Vincent Villaluna | Sciencx | https://www.scien.cx/2022/02/15/github-readme-with-diagram-using-mermaid/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.