---
  title: hello2
  config:
    look: handDrawn
    layout: elk
    elk:
        
        
---
stateDiagram-v2
    direction LR
    accTitle: An idealized Open Source supply-chain graph

    %%
    state "🟦 Importer" as author_importer
    state "🟥 Supplier, Owner" as author_owner
    state "🟨🟥 Maintainer, Author\n🟨 Custodian" as author
    state "🟩 Distributor" as repository_distributor
    state "🟦 Importer" as language_importer
    state "🟦🟨 Packager" as language_packager
    state "🟦🟨 OSS Steward" as language_steward
    state "🟨 Curator" as language_curator
    state "🟩 Distributor" as language_distributor
    state "🟦 Contributor" as contributor
    state "🟦 Importer" as package_importer
    state "🟨 Patcher" as package_patcher
    state "🟨🟦 Builder\n🟨🟦 Packager\n🟨🟦 Containerizer" as package_packager
    state "🟨 Curator" as package_curator
    state "🟩 Distributor" as package_distributor
    state "🟦 Importer" as integrator_importer
    state "🟥 Supplier, Manufacturer, Owner" as integrator_owner
    state "🟦🟨🟥 Integrator, Developer" as integrator_developer
    state "🟩🟨 SBOM Redactor\n🟩 Publisher" as integrator_publisher
    state "🟦🟨 Builder" as integrator_builder
    state "🟨 Deployer" as deployer
    state "🟦 Vuln. Checker" as integrator_checker
    state "🟩🟨 SBOM Redactor" as redactor
    state "🟦 Consumer\n🟦  User" as consumer
    state "🟦 Auditor" as auditor_internal
    state "🟦 Auditor" as auditor_external

    %%
    classDef createsSBOM stroke:red,stroke-width:3px;
    classDef updatesSBOM stroke:yellow,stroke-width:3px;
    classDef assemblesSBOM stroke:yellow,stroke-width:3px;
    classDef distributesSBOM stroke:green,stroke-width:3px;
    classDef verifiesSBOM stroke:#07f,stroke-width:3px;

    %%
    class author_importer verifiesSBOM
    class author_owner createsSBOM
    class manufacturer_owner createsSBOM
    class author assemblesSBOM
    class package_importer verifiesSBOM
    class package_patcher updatesSBOM
    class package_packager assemblesSBOM
    class package_curator distributesSBOM
    class package_distributor distributesSBOM
    class language_importer verifiesSBOM
    class language_packager assemblesSBOM
    class language_steward updatesSBOM
    class language_curator distributesSBOM
    class language_distributor distributesSBOM
    class repository_distributor distributesSBOM
    class integrator_importer verifiesSBOM
    class integrator_owner createsSBOM
    class integrator_developer assemblesSBOM
    class integrator_publisher distributesSBOM
    class integrator_builder assemblesSBOM
    class integrator_checker verifiesSBOM
    class deployer assemblesSBOM
    class redactor distributesSBOM
    class auditor_internal verifiesSBOM
    class auditor_external verifiesSBOM

    state "Maintainer Environment" as environment_maintainer {
        [*] --> author_importer
        [*] --> author
        author_importer --> author
        author_owner --> author
        author       --> language_packager
    }

    [*] --> environment_maintainer

    state "Language Ecosystem" as ecosystem_lang {
        [*] --> language_importer
        [*] --> language_steward
        [*] --> language_curator
        [*] --> language_distributor
        language_importer --> language_distributor
        language_importer --> language_curator
        language_steward --> language_curator
        language_curator --> language_distributor
    }

    language_packager --> ecosystem_lang
    ecosystem_lang    --> ecosystem_lang

    state "Public Collaboration Ecosystem" as ecosystem_repo {
        [*] --> repository_distributor
    }

    author         --> ecosystem_repo
    ecosystem_repo --> author

    repository_distributor --> contributor
    contributor            --> repository_distributor

    state "Package Ecosystem" as ecosystem_package {
        [*] --> package_importer
        [*] --> package_packager
        [*] --> package_patcher
        package_importer --> package_patcher
        package_importer --> package_packager
        package_patcher  --> package_packager
        package_packager --> package_curator
        package_packager --> package_distributor
        package_curator  --> package_distributor
    }

    repository_distributor --> ecosystem_package
    language_distributor   --> ecosystem_package
    ecosystem_package      --> ecosystem_package

    state "Integrator Environment" as environment_integrator {
        [*] --> integrator_developer
        [*] --> integrator_importer
        integrator_importer  --> integrator_developer
        integrator_owner     --> integrator_developer
        integrator_builder   --> integrator_publisher
        integrator_developer --> integrator_checker
        integrator_checker   --> integrator_developer
        auditor_internal     --> integrator_developer
        integrator_developer --> integrator_builder
        integrator_developer --> auditor_internal
    }

    repository_distributor --> environment_integrator
    language_distributor   --> environment_integrator
    package_distributor    --> environment_integrator

    state "Production Environment" as environment_prod {
        [*] --> deployer
        deployer --> redactor
    }

    integrator_publisher --> [*]
    integrator_developer --> environment_prod
    integrator_builder   --> environment_prod
    integrator_publisher --> environment_prod

    deployer --> auditor_external
    deployer --> consumer
    redactor --> consumer

---
config:
  look: neo
---
flowchart RL
    subgraph "   "
        A5@{ shape: manual-file, label: "a label"}
        B5@{ shape: manual-input, label: "a label" }
        C5@{ shape: mul-doc, label: "a label" }
        D5@{ shape: mul-proc, label: "a label" }
        E5@{ shape: paper-tape, label: "a label" }
        B3@{ shape: das, label: "a label" }
        C3@{ shape: disk, label: "a label" }
        D4@{ shape: lin-doc, label: "a label" }
        E4@{ shape: loop-limit, label: "a label" }
    end
    subgraph "   "
        B6@{ shape: summary, label: "a label" }
        C6@{ shape: tag-we-rect, label: "a label" }
        D6@{ shape: tag-rect, label: "a label" }
        A2@{ shape: fork}
        B2@{ shape: hourglass }
        C2@{ shape: comment, label: "I am a comment" }
        D2@{ shape: bolt }
        D3@{ shape: disp, label: "a label" }
        C4@{ shape: junction, label: "a label" }
        A4@{ shape: extract, label: "a label"}
        B52[a fr]@{ shape: fr }
    end
    subgraph " "
        A1@{ shape: text, label: This is a textblock}
        B1@{ shape: card, label: "a label" }
        C1@{ shape: lined-proc, label: "a label" }
        D1@{ shape: start, label: "a label" }
        E1@{ shape: stop, label: "a label" }
        E2@{ shape: doc, label: "a label" }
        A6@{ shape: stored-data, label: "a label"}
        A3@{ shape: delay, label: "a label" }
        E3@{ shape: div-proc, label: "a label" }
        B4[a label]@{ shape: win-pane }
    end
      

---
  title: hello2
  config:
    look: handDrawn
    elk:
      
---
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
flowchart TD

    A([Start]) -->|go to booking page| B("select
    ISBS booking no")
    A --> QQ{cancel booking}
    A --> RR{no show}
    A --> SS{change booking}
    B -->C(wmpay_request_payment.request_type= 'partial',
 wmpay_request_payment.status= 'paid',
 pos_booking.booking_status= ‘partial’ and 'full_deposit')
 style C text-align:left
    C -->D{manage booking}

    D -->|cancel|E[ระบบแสดงช่องให้กรอกเหตุผล]
    E -->F{กดปุ่ม 'cancel' หรือไม่}
    F -->|Yes|G[ระบบบันทึกค่าใหม่
    และไม่สามารถแก้ไขข้อมูลได้]
    F -->|No|H[กดปุ่ม 'close']
    H -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
    G -->|ระบบส่งข้อมูล|I[(POS_database)]
    I -->|pos_booking.booking_status='cancel'|Z([End])


    D -->|no show|J[ระบบแสดงช่องให้กรอกเหตุผล]
    J -->K{กดปุ่ม 'noshow' หรือไม่}
    K -->|Yes|L[ระบบสร้างใบเสร็จอัตโนมัติ
    Product_id: 439,
    ItemName: no show]
     style L text-align:left

     K -->|No|O[กดปุ่ม 'close']
     O -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
    L -->M[ระบบบันทึกค่าใหม่]
    M -->|ระบบส่งข้อมูล|N[(POS_database)]
    N -->|pos_booking.booking_status=‘noshow’|Z

---
  title: hello2
  config:
    look: handDrawn
    layout: dagre
    elk:
        nodePlacementStrategy: BRANDES_KOEPF
---
flowchart
  A --> A
  subgraph A
    B --> B
    subgraph B
      C
    end
  end

---
config:
  look: handdrawn
  flowchart:
    htmlLabels: true
---
flowchart
      A[I am a long text, where do I go??? handdrawn - true]

---
config:
  flowchart:
    htmlLabels: false
---
flowchart
      A[I am a long text, where do I go??? classic - false]

---
config:
  flowchart:
    htmlLabels: true
---
flowchart
      A[I am a long text, where do I go??? classic - true]

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5


    

      flowchart LR
    A:::foo & B:::bar --> C:::foobar
    classDef foo stroke:#f00
    classDef bar stroke:#0f0
    classDef ash color:red
    class C ash
    style C stroke:#00f, fill:black

    

      stateDiagram
    A:::foo
    B:::bar --> C:::foobar
    classDef foo stroke:#f00
    classDef bar stroke:#0f0
    style C stroke:#00f, fill:black, color:white

    

flowchart TB
  A@{
    label: "aksljhf kasjdh"
  }