Mermaid

목표

마크다운에서 다이어그램을 그리고 싶다

install plugin

• Markdown Preview Mermaid Support

create markdown

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]

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]

flowchart TD
    lb-prov-api --> backend_set_api
    backend_set_api --> backend_http
    backend_set_api --> backend_https
    backend_http --> prov1-oci-jn1
    backend_http --> prov2-oci-jn1
    backend_https --> prov1-oci-jn1
    backend_https --> prov2-oci-jn1
    listener_http --> lb-prov-api
    listener_https --> lb-prov-api

try online

• https://mermaid.live/

preview

reference

• https://github.com/mermaid-js/mermaid
• https://mermaid.js.org/config/Tutorials.html