2. Mermaid Examples

flowchart LR

    classDef smallNod2 fill:#f9f,stroke:#333,stroke-width:2px,width:500px,height:500px,font-size:260pt;

    A((A)):::smallNode2
    B((B)):::smallNode2
    C((C)):::smallNode2

    A---|This is the text|B
    A-->|text1|B
    A-- text2 -->B
    A ----|text3| B
    A -- text4 --> B -- text1 --> C
    A-- This is the text6! ---B
    B <--text2--> C
    B e1@==> C
    e1@{ animate: true, animation: slow }

%%{init: { 'flowchart': { 'curve': 'linear','htmlLabels': true } } }%%
graph LR
    classDef smallNode fill:#f9f,stroke:#333,stroke-width:2px;

    style 1 fill:#f9f,stroke:#333,stroke-width:2px, width:500px, height:500px
    style 2 fill:#ccf,stroke:#333,stroke-width:2px, width:500px, height:500px
    style 3 fill:#f9f,stroke:#333,stroke-width:2px, width:500px, height:500px
    style 4 fill:#ccf,stroke:#333,stroke-width:2px, width:500px, height:500px
    style 5 fill:#f9f,stroke:#333,stroke-width:2px, width:500px, height:500px
    style 6 fill:#ccf,stroke:#333,stroke-width:2px, width:500px, height:500px
    style 7 fill:#f9f,stroke:#333,stroke-width:2px, width:500px, height:500px
    style 8 fill:#ccf,stroke:#333,stroke-width:2px, width:500px, height:500px

    1(("  1  "))
    2(("  2  "))
    3((3))
    4((4))
    5((5))
    6((6))
    7((7))
    8((8))

    1----|30| 2
    1---|24| 4
    1----|25| 5

    2----|27| 3
    2---|28| 4
    2----|27| 6

    3----|30| 7
    3-----|26| 6

    4---|29| 5
    4---|21| 6

    5---|30| 6
    5-----|30| 8

    6---|28| 7
    6---|36| 8

    7-----|25| 8

flowchart LR
  A e4@==> B
  classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
  class e4 animate

flowchart LR
    D1["Depot 1"]
    D2["Depot 2"]
    D3["Depot 3"]
    D4["Depot 4"]
    D5["Depot 5"]
    D6["Depot 6"]
    D7["Depot 7"]
    D8["Depot 8"]
    D9["Depot 9"]
    D10["Depot 10"]
    D11["Depot 11"]
    D12["Depot 12"]
    C1["Customer 1"]
    C2["Customer 2"]
    C3["Customer 3"]
    C4["Customer 4"]
    C5["Customer 5"]
    C6["Customer 6"]
    C7["Customer 7"]
    C8["Customer 8"]
    C9["Customer 9"]
    C10["Customer 10"]
    C11["Customer 11"]
    C12["Customer 12"]
    D1 --->|5.0 tons| C2
    D1 --->|75.0 tons| C3
    D1 --->|100.0 tons| C4
    D1 --->|120.0 tons| C12
    D5 --->|120.0 tons| C1
    D5 --->|40.0 tons| C2
    D8 --->|35.0 tons| C2
    D8 --->|100.0 tons| C6
    D8 --->|85.0 tons| C10
    D9 --->|110.0 tons| C5
    D9 --->|65.0 tons| C10
    D9 --->|95.0 tons| C11
    D12 --->|90.0 tons| C7
    D12 --->|60.0 tons| C8
    D12 --->|30.0 tons| C9

  %%{init: {'theme': 'default', 'flowchart': {'curve': 'monotoneY'}}}%%
  flowchart TD
      subgraph Step1["Step 1: Start with Original Problem"]
          A[Original Problem]
      end

      subgraph Step2["Step 2: Check if Subproblem is Solved"]
          B{Is Subproblem Solved?}
      end

      subgraph Step3["Step 3: If No - Break into Subproblems"]
          C[Break Down into Subproblems]
          D[Solve Subproblem]
          E[Store Solution in Memory]
      end

      subgraph Step4["Step 4: If Yes or After Storing - Use Stored Solution"]
          F[Use Stored Solution]
      end

      subgraph Step5["Step 5: Solve Original Problem Efficiently"]
          G[Solve Original Problem Efficiently]
      end

      A --> B
      B -- "No" --> C
      C --> D
      D --> E
      E --> F
      B -- "Yes" --> F
      F --> G

      %% Animation Hints via click
      click A "javascript:void(0)" "Start with the main problem"
      click B "javascript:void(0)" "Check if subproblem was solved"
      click C "javascript:void(0)" "Divide into overlapping subproblems"
      click D "javascript:void(0)" "Solve the required subproblem"
      click E "javascript:void(0)" "Store the solution to avoid recomputation"
      click F "javascript:void(0)" "Reuse stored result"
      click G "javascript:void(0)" "Problem solved efficiently!"

%%{init: {"themeVariables": {"fontSize":"18px"}, "flowchart": {"curve": "monotoneY", "nodeSpacing": 60, "rankSpacing": 50, "htmlLabels": true, "useMaxWidth": true, "animate": true}} }%%
flowchart LR
    Start((Start)):::start --> CallFunc{"Is Base Case?"}:::decision
    CallFunc -- Yes --> BaseCase(["Return Result (Base Case)"]):::endClass
    CallFunc -- No --> Recurse["Call function<br>again with<br>simpler input"]:::recurse
    Recurse -- Recursive Call --> CallFunc
    BaseCase --> Output["Result unwinds<br>back through calls"]:::output

    classDef start fill:#9eebcf,stroke:#054c38,stroke-width:2px;
    classDef decision fill:#ffd366,stroke:#e09f3e,stroke-width:2px;
    classDef recurse fill:#a0c4ff,stroke:#19388a,stroke-width:2px,font-style:italic;
    classDef endClass fill:#bdf7b7,stroke:#24581c,stroke-width:2px;
    classDef output fill:#e9b3fd,stroke:#612796,stroke-width:2px,font-style:italic;