Skip to content

Instantly share code, notes, and snippets.

@robsonpiere
Last active August 28, 2024 18:51
Show Gist options
  • Save robsonpiere/2fbf4a58c6254ed098f7540d09c6e650 to your computer and use it in GitHub Desktop.
Save robsonpiere/2fbf4a58c6254ed098f7540d09c6e650 to your computer and use it in GitHub Desktop.
Testing Mermaid support on github
flowchart TD
%% Nodes
    A("fab:fa-youtube <a rel="noopener" href="https://www.youtube.com/watch?v=T5Zthq-QR2A&amp" target="_blank">Starter Guide</a>")
    B("fab:fa-youtube <a rel="noopener" href="https://www.youtube.com/watch?v=rfQ_yGJ8QAQ&amp" target="_blank">Make Flowchart</a>")
    C("fa:fa-book-open <a rel="noopener" href="https://mermaid.js.org/syntax/flowchart.html" target="_blank">Learn More</a>")
    D{"Use the editor"}
    E(fa:fa-shapes Visual Editor)
    F("fa:fa-chevron-up Add node in toolbar")
    G("fa:fa-comment-dots AI chat")
    H("fa:fa-arrow-left Open AI in side menu")
    I("fa:fa-code Text")
    J(fa:fa-arrow-left Type Mermaid syntax)

%% Edge connections between nodes
    A --> B --> C --> D -- Build and Design --> E --> F
    D -- Use AI --> G --> H
    D -- Mermaid js --> I --> J

%% Individual node styling. Try the visual editor toolbar for easier styling!
    style E color:#FFFFFF, fill:#AA00FF, stroke:#AA00FF
    style G color:#FFFFFF, stroke:#00C853, fill:#00C853
    style I color:#FFFFFF, stroke:#2962FF, fill:#2962FF

%% You can add notes with two "%" signs in a row!
Loading
flowchart
    A{{"Kolb's four stages of learning"}} --> n8("Concrete experience (CE): feeling") & nl("Reflective Observation (RO): watching") & n6("Abstract Conceptualizing (AC): thinking") & ng("Active experimentation (AE): doing")
    n8 --> nb(["Doing / having an experience"])
    nl --> n9(["Reviewing / reflecting on the experience / processing"])
    n6 --> n7(["Concluding / learning from the experience"])
    ng --> np(["Planning / trying out what you have learned"])
    style A stroke:#000000,fill:#69C3D7
    style n8 stroke:#000000,fill:#69D7A7
    style nl stroke:#000000,fill:#9498F8
    style n6 stroke:#000000,fill:#EECF8F
    style ng stroke:#000000,fill:#F19A7B
    style nb fill:#D4EFDF ,stroke:#000000
    style n9 stroke:#000000,fill:#BABCF1
    style n7 stroke:#000000,fill:#F7E8CA
    style np stroke:#000000,fill:#F5C9BA
Loading
  info
Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment