偶然遇見 Mermaid 這個線上繪製流程圖的服務,試著玩了一下,非常適合用文字快速繪製清晰的架構圖與流程圖:

👉 線上編輯器:Mermaid Live Editor

💡 Mermaid 原始碼

以下為畫出該張資金流向圖的語法:

flowchart TB
    subgraph Broker_Section["券商端 (Securities)"]
        FT["Firstrade"]
        CS["Charles Schwab"]
        IB["Interactive Brokers"]
    end

    subgraph Bank_Section["銀行 / Fintech 端 (Banking)"]
        US_Bank["美國支票帳戶"]
        WISE["WISE"]
        Revolut["Revolut"]
    end

    FT <-- ACH 綁定 CS 支票帳戶 --> CS
    CS <-- ACH 綁定 (CS 支票帳戶/IB DD帳戶) --> IB
    US_Bank <-- ACH 綁定 --> FT & CS & IB & WISE
    WISE <-- ACH Plaid 綁定 --> FT
    WISE <-- ACH 綁定 --> CS
    WISE <-- WISE 帳戶綁定 --> IB
    Revolut -- Direct Deposit (USD) / Wire Transfer (JPY) --> IB
    Revolut -- Direct Deposit --> CS & WISE & US_Bank
    IB -- Wire Transfer (USD) --> Revolut

    FT:::broker
    CS:::broker
    IB:::broker
    US_Bank:::bank
    WISE:::bank
    Revolut:::bank

    classDef broker fill:#1a5276,color:#fff,stroke:#333,stroke-width:2px
    classDef bank fill:#2874a6,color:#fff,stroke:#333,stroke-width:2px
    classDef note fill:#fcf3cf,color:#333,stroke:#f1c40f