02-3. Tutorial for mermaid

icon-administrator administrator
Published: Feb. 4, 2026, 3:34 p.m. UTC / Updated: Feb. 18, 2026, 2:05 a.m. UTC
👍 0
🔖 0 Bookmarks
English

mermaid

Overview

  • Mermaid is a markup language that generates diagrams from text.
  • It is supported by GitHub, GitLab, and many Markdown editors.
  • You can create various charts like the following:

How to Make Curry

graph TD
    A[Prepare ingredients] --> B[Cut onions, carrots, potatoes]
    B --> C[Sauté onions in oil]
    C --> D[Add carrots and potatoes]
    D --> E[Pour water and simmer]
    E --> F[When vegetables are tender...]
    F --> G[Add curry roux]
    G --> H[Simmer on low heat for 10 minutes]
    H --> I[Complete!]

Basic Syntax

1. Flowchart

Basic Flowchart

graph TD
    A[Start] --> B{Condition}
    B -->|Yes| C[Process 1]
    B -->|No| D[Process 2]
    C --> E[End]
    D --> E

```mermaid
graph TD
    A[Start] --> B{Condition}
    B -->|Yes| C[Process 1]
    B -->|No| D[Process 2]
    C --> E[End]
    D --> E
```　

Syntax Explanation:

  • graph TD: Top-Down flowchart
  • graph LR: Left-Right flowchart
  • [ ]: Rectangle (process)
  • { }: Diamond (condition)
  • ( ): Rounded rectangle
  • -->: Arrow (connection)
  • -->|label|: Labeled arrow

Subgraph (Grouping)

graph TB
    subgraph "Frontend"
        A[Web App]
        B[Mobile App]
    end
    
    subgraph "Backend"
        C[API]
        D[Database]
    end
    
    A --> C
    B --> C
    C --> D

```mermaid
graph TB
    subgraph "Frontend"
        A[Web App]
        B[Mobile App]
    end
    
    subgraph "Backend"
        C[API]
        D[Database]
    end
    
    A --> C
    B --> C
    C --> D
```　

2. Sequence Diagram

sequenceDiagram
    participant U as User
    participant W as Web App
    participant A as API
    participant D as Database
    
    U->>W: Send Request
    W->>A: API Call
    A->>D: Fetch Data
    D-->>A: Return Data
    A-->>W: Response
    W-->>U: Display Result

```mermaid
sequenceDiagram
    participant U as User
    participant W as Web App
    participant A as API
    participant D as Database
    
    U->>W: Send Request
    W->>A: API Call
    A->>D: Fetch Data
    D-->>A: Return Data
    A-->>W: Response
    W-->>U: Display Result
```　

Syntax Explanation:

  • participant: Define participants (actors)
  • ->>: Solid arrow (synchronous communication)
  • -->>: Dotted arrow (asynchronous/return)
  • ->: Dashed arrow (asynchronous)

3. ER Diagram (Entity Relationship Diagram)

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    PRODUCT ||--o{ LINE-ITEM : "ordered in"
    CUSTOMER {
        string customer_id PK
        string name
        string email
    }
    ORDER {
        string order_id PK
        string customer_id FK
        datetime order_date
    }
    PRODUCT {
        string product_id PK
        string name
        decimal price
    }
    LINE-ITEM {
        string line_item_id PK
        string order_id FK
        string product_id FK
        int quantity
    }

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    PRODUCT ||--o{ LINE-ITEM : "ordered in"
    CUSTOMER {
        string customer_id PK
        string name
        string email
    }
    ORDER {
        string order_id PK
        string customer_id FK
        datetime order_date
    }
    PRODUCT {
        string product_id PK
        string name
        decimal price
    }
    LINE-ITEM {
        string line_item_id PK
        string order_id FK
        string product_id FK
        int quantity
    }
```　

Syntax Explanation:

  • ||--o{: One to Many
  • ||--||: One to One
  • }o--o{: Many to Many
  • PK: Primary Key
  • FK: Foreign Key

4. Gantt Chart

gantt
    title Project Schedule
    dateFormat YYYY-MM-DD
    section Design
    Requirements Definition :a1, 2025-01-01, 30d
    Basic Design           :a2, after a1, 20d
    Detailed Design        :a3, after a2, 15d
    section Development
    Frontend Development   :b1, after a3, 40d
    Backend Development    :b2, after a3, 45d
    section Testing
    Unit Testing          :c1, after b1, 20d
    Integration Testing   :c2, after c1, 15d

```mermaid
gantt
    title Project Schedule
    dateFormat YYYY-MM-DD
    section Design
    Requirements Definition :a1, 2025-01-01, 30d
    Basic Design           :a2, after a1, 20d
    Detailed Design        :a3, after a2, 15d
    section Development
    Frontend Development   :b1, after a3, 40d
    Backend Development    :b2, after a3, 45d
    section Testing
    Unit Testing          :c1, after b1, 20d
    Integration Testing   :c2, after c1, 15d
```　

5. Timeline

timeline
    title System History
    
    1980s : Mainframe Introduction
          : COBOL/CICS
    
    1990s : 3-Company Merger
          : Intermediate DB Introduction
    
    2000s : Web App Launch
          : REST API Introduction
    
    2020s : Cloud Migration
          : Microservices Architecture

```mermaid
timeline
    title System History
    
    1980s : Mainframe Introduction
          : COBOL/CICS
    
    1990s : 3-Company Merger
          : Intermediate DB Introduction
    
    2000s : Web App Launch
          : REST API Introduction
    
    2020s : Cloud Migration
          : Microservices Architecture
```　

6. Class Diagram

classDiagram
    class Customer {
        +string customer_id
        +string name
        +string email
        +createOrder()
        +updateProfile()
    }
    
    class Order {
        +string order_id
        +datetime order_date
        +calculateTotal()
        +cancel()
    }
    
    class Product {
        +string product_id
        +string name
        +decimal price
        +updatePrice()
    }
    
    Customer "1" --> "*" Order
    Order "*" --> "*" Product

```mermaid
classDiagram
    class Customer {
        +string customer_id
        +string name
        +string email
        +createOrder()
        +updateProfile()
    }
    
    class Order {
        +string order_id
        +datetime order_date
        +calculateTotal()
        +cancel()
    }
    
    class Product {
        +string product_id
        +string name
        +decimal price
        +updatePrice()
    }
    
    Customer "1" --> "*" Order
    Order "*" --> "*" Product
```　

7. State Diagram

stateDiagram-v2
    [*] --> Unregistered
    Unregistered --> Registering: Start Registration
    Registering --> Under_Review: Info Entry Complete
    Under_Review --> Approved: Review OK
    Under_Review --> Rejected: Review NG
    Approved --> Active: First Login
    Active --> Suspended: Terms Violation
    Suspended --> [*]
    Rejected --> [*]

```mermaid
stateDiagram-v2
    [*] --> Unregistered
    Unregistered --> Registering: Start Registration
    Registering --> Under_Review: Info Entry Complete
    Under_Review --> Approved: Review OK
    Under_Review --> Rejected: Review NG
    Approved --> Active: First Login
    Active --> Suspended: Terms Violation
    Suspended --> [*]
    Rejected --> [*]
```　

8. Pie Chart

pie title Technology Stack in System
    "Legacy (COBOL/CICS)" : 40
    "Modern (Python/Node.js)" : 35
    "Middleware (Java/Spring)" : 15
    "Other" : 10

```mermaid
pie title System Architecture Tech Stack
    "Legacy (COBOL/CICS)" : 40
    "Modern (Python/Node.js)" : 35
    "Middleware (Java/Spring)" : 15
    "Other" : 10
```　

Styling

Node Coloring

graph TD
    A[Normal] --> B[Warning]
    B --> C[Success]
    C --> D[Error]
    
    style A fill:#e1f5ff
    style B fill:#fff4e1
    style C fill:#e1ffe1
    style D fill:#ffe1e1

```mermaid
graph TD
    A[Normal] --> B[Warning]
    B --> C[Success]
    C --> D[Error]
    
    style A fill:#e1f5ff
    style B fill:#fff4e1
    style C fill:#e1ffe1
    style D fill:#ffe1e1
```　

Class-based Styling

graph TB
    subgraph "Legacy Layer"
        A[Mainframe]
        B[COBOL]
    end
    
    subgraph "Modern Layer"
        C[API]
        D[Web App]
    end
    
    style A fill:#ff6b6b
    style B fill:#ff6b6b
    style C fill:#51cf66
    style D fill:#51cf66

```mermaid
graph TB
    subgraph "Legacy Layer"
        A[Mainframe]
        B[COBOL]
    end
    
    subgraph "Modern Layer"
        C[API]
        D[Web App]
    end
    
    style A fill:#ff6b6b
    style B fill:#ff6b6b
    style C fill:#51cf66
    style D fill:#51cf66
```　

Practical Examples

Complex System Architecture Diagram

graph TB
    subgraph "User Layer"
        WEB[Web App]
        MOBILE[Mobile App]
    end
    
    subgraph "API Layer"
        GATEWAY[API Gateway]
        AUTH[Auth Service]
    end
    
    subgraph "Application Layer"
        APP1[App 1]
        APP2[App 2]
    end
    
    subgraph "Data Layer"
        DB1[(Database 1)]
        DB2[(Database 2)]
    end
    
    WEB --> GATEWAY
    MOBILE --> GATEWAY
    GATEWAY --> AUTH
    GATEWAY --> APP1
    GATEWAY --> APP2
    APP1 --> DB1
    APP2 --> DB2
    
    style WEB fill:#4dabf7
    style MOBILE fill:#4dabf7
    style GATEWAY fill:#ffd43b
    style AUTH fill:#ffd43b
    style APP1 fill:#51cf66
    style APP2 fill:#51cf66
    style DB1 fill:#ff6b6b
    style DB2 fill:#ff6b6b

```mermaid
graph TB
    subgraph "User Layer"
        WEB[Web App]
        MOBILE[Mobile App]
    end
    
    subgraph "API Layer"
        GATEWAY[API Gateway]
        AUTH[Auth Service]
    end
    
    subgraph "Application Layer"
        APP1[App 1]
        APP2[App 2]
    end
    
    subgraph "Data Layer"
        DB1[(Database 1)]
        DB2[(Database 2)]
    end
    
    WEB --> GATEWAY
    MOBILE --> GATEWAY
    GATEWAY --> AUTH
    GATEWAY --> APP1
    GATEWAY --> APP2
    APP1 --> DB1
    APP2 --> DB2
    
    style WEB fill:#4dabf7
    style MOBILE fill:#4dabf7
    style GATEWAY fill:#ffd43b
    style AUTH fill:#ffd43b
    style APP1 fill:#51cf66
    style APP2 fill:#51cf66
    style DB1 fill:#ff6b6b
    style DB2 fill:#ff6b6b
```　

Common Symbols and Their Meanings

Symbol Meaning Example
[ ] Rectangle (Process) A[Process]
{ } Diamond (Condition) B{Decision}
( ) Rounded Rectangle C(Start)
(( )) Circle (Database) D((DB))
--> Arrow A --> B
-.-> Dotted Arrow A -.-> B
==> Thick Arrow A ==> B
`--> label `

Tips and Best Practices

  1. Prioritize Readability

    • Avoid overly long labels
    • Group appropriately with subgraphs

  2. Color Usage

    • Unify colors by layer
    • Use prominent colors for important nodes

  3. Direction

    • TD (Top to Down): Common flowcharts
    • LR (Left to Right): Timelines and processes
    • BT (Bottom to Top): Hierarchical structures
    • RL (Right to Left): Special cases

  4. Split Complex Diagrams

    • Don't cram too much into one diagram
    • Split into multiple diagrams and supplement with explanatory text

Summary

By using Mermaid, you can create diagrams that can be version-controlled just like code. Since documentation and diagrams can be managed in the same repository, maintainability is improved.

Complex Architecture Example of a Legacy Financial System

System Architecture Diagram (Mermaid)

graph TB
    subgraph "Frontend Layer"
        WEB[Web App<br/>React/Next.js]
        MOBILE[Mobile App<br/>iOS/Android]
        ATM[ATM Terminal<br/>Windows Embedded]
        BRANCH[Branch Terminal<br/>Java Swing]
    end

    subgraph "API Gateway Layer"
        APIGW[API Gateway<br/>Kong/AWS API Gateway]
        AUTH[Auth Service<br/>OAuth2/SAML]
        RATE[Rate Limiter<br/>Redis Cluster]
    end

    subgraph "Application Layer (Modern)"
        CUSTOMER[Customer API<br/>Node.js/FastAPI]
        PRODUCT[Product API<br/>Java Spring Boot]
        TRANSACTION[Transaction API<br/>Python/FastAPI]
        NOTIFICATION[Notification Service<br/>Node.js]
    end

    subgraph "Application Layer (Legacy)"
        LEGACY_MAIN[Mainframe Integration<br/>COBOL/CICS]
        LEGACY_BATCH[Batch Processing<br/>JCL/COBOL]
        LEGACY_REPORT[Report Generation<br/>PL/I]
    end

    subgraph "Intermediate DB Layer (Data Integration)"
        SYNC_DB1[Sync DB-1<br/>Oracle 11g<br/>Integrated DB from 3-company merger]
        SYNC_DB2[Sync DB-2<br/>DB2 z/OS<br/>Former Company A Account System]
        SYNC_DB3[Sync DB-3<br/>PostgreSQL<br/>Former Company B Account System]
        SYNC_DB4[Sync DB-4<br/>SQL Server<br/>Former Company C Account System]
        MQ_DB[メッセージキューDB<br/>IBM MQ Series]
    end

    subgraph "Mainframe Layer"
        MAINFRAME[Mainframe<br/>IBM z/OS<br/>COBOL/CICS/VSAM]
        MAINFRAME_DB[Main DB<br/>DB2 z/OS<br/>Core Account System]
        TAPE[Magnetic Tape<br/>Backup/Archive]
    end

    subgraph "Legacy Middleware"
        CORBA[CORBA ORB<br/>IIOP Protocol]
        SOAP[SOAP Service<br/>Apache Axis]
        ETL1[ETL-1<br/>Informatica<br/>Daily Batch]
        ETL2[ETL-2<br/>Pentaho<br/>Real-time Integration]
        FILE_TRANSFER[File Transfer<br/>FTP/SFTP/FTPS<br/>Multiple Protocols]
    end

    subgraph "External Integration Layer"
        PAYMENT[Payment Network<br/>Zengin/BOJ-NET]
        CREDIT[Credit Bureau<br/>CIC/JICC]
        REGULATORY[Regulatory Reporting<br/>FSA/BOJ]
        PARTNER1[Partner API-1<br/>REST/GraphQL]
        PARTNER2[Partner API-2<br/>SOAP/XML]
    end

    subgraph "Audit & Log Layer"
        AUDIT_DB[Audit DB<br/>PostgreSQL<br/>7-Year Retention]
        LOG_AGG[Log Aggregation<br/>ELK Stack]
        BACKUP[Backup<br/>Veeam/Tivoli]
    end

    subgraph "Security Layer"
        FIREWALL[Firewall<br/>Multi-Stage]
        WAF[WAF<br/>F5/Cloudflare]
        IDS[Intrusion Detection<br/>Snort/Suricata]
    end

    %% Frontend → API Gateway
    WEB --> APIGW
    MOBILE --> APIGW
    ATM --> APIGW
    BRANCH --> APIGW

    %% API Gateway → Auth & Rate Limiting
    APIGW --> AUTH
    APIGW --> RATE
    AUTH --> RATE

    %% API Gateway → Application Layer (Modern)
    APIGW --> CUSTOMER
    APIGW --> PRODUCT
    APIGW --> TRANSACTION
    APIGW --> NOTIFICATION

    %% Modern Apps → Intermediate DB
    CUSTOMER --> SYNC_DB1
    CUSTOMER --> SYNC_DB2
    PRODUCT --> SYNC_DB1
    PRODUCT --> SYNC_DB3
    TRANSACTION --> SYNC_DB1
    TRANSACTION --> SYNC_DB2
    TRANSACTION --> SYNC_DB4
    NOTIFICATION --> MQ_DB

    %% Modern Apps → Legacy Integration
    CUSTOMER --> LEGACY_MAIN
    TRANSACTION --> LEGACY_MAIN
    LEGACY_MAIN --> CORBA
    LEGACY_MAIN --> SOAP

    %% Legacy → Mainframe
    CORBA --> MAINFRAME
    SOAP --> MAINFRAME
    LEGACY_BATCH --> MAINFRAME
    LEGACY_REPORT --> MAINFRAME
    MAINFRAME --> MAINFRAME_DB
    MAINFRAME --> TAPE

    %% Sync between Intermediate DBs
    SYNC_DB1 <--> ETL1
    SYNC_DB2 <--> ETL1
    SYNC_DB3 <--> ETL1
    SYNC_DB4 <--> ETL1
    SYNC_DB1 <--> ETL2
    SYNC_DB2 <--> ETL2
    MAINFRAME_DB --> ETL1
    MAINFRAME_DB --> ETL2

    %% Mainframe → Intermediate DB
    MAINFRAME --> SYNC_DB1
    MAINFRAME --> SYNC_DB2

    %% File Transfer
    FILE_TRANSFER --> SYNC_DB1
    FILE_TRANSFER --> SYNC_DB2
    FILE_TRANSFER --> SYNC_DB3
    FILE_TRANSFER --> MAINFRAME

    %% External Integration
    TRANSACTION --> PAYMENT
    CUSTOMER --> CREDIT
    LEGACY_BATCH --> REGULATORY
    CUSTOMER --> PARTNER1
    PRODUCT --> PARTNER2

    %% Audit & Logging
    CUSTOMER --> AUDIT_DB
    TRANSACTION --> AUDIT_DB
    MAINFRAME --> AUDIT_DB
    CUSTOMER --> LOG_AGG
    TRANSACTION --> LOG_AGG
    APIGW --> LOG_AGG
    MAINFRAME_DB --> BACKUP
    SYNC_DB1 --> BACKUP
    SYNC_DB2 --> BACKUP

    %% Security
    FIREWALL --> APIGW
    WAF --> FIREWALL
    IDS --> WAF

    style MAINFRAME fill:#ff6b6b
    style MAINFRAME_DB fill:#ff6b6b
    style SYNC_DB1 fill:#ffd93d
    style SYNC_DB2 fill:#ffd93d
    style SYNC_DB3 fill:#ffd93d
    style SYNC_DB4 fill:#ffd93d
    style CORBA fill:#ff8787
    style SOAP fill:#ff8787
    style ETL1 fill:#ff8787
    style ETL2 fill:#ff8787

```mermaid
graph TB
    subgraph "Frontend Layer"
        WEB[Web App<br/>React/Next.js]
        MOBILE[Mobile App<br/>iOS/Android]
        ATM[ATM Terminal<br/>Windows Embedded]
        BRANCH[Branch Terminal<br/>Java Swing]
    end

    subgraph "API Gateway Layer"
        APIGW[API Gateway<br/>Kong/AWS API Gateway]
        AUTH[Auth Service<br/>OAuth2/SAML]
        RATE[Rate Limiting<br/>Redis Cluster]
    end

    subgraph "Application Layer (Modern)"
        CUSTOMER[Customer Management API<br/>Node.js/FastAPI]
        PRODUCT[Product Management API<br/>Java Spring Boot]
        TRANSACTION[Transaction API<br/>Python/FastAPI]
        NOTIFICATION[Notification Service<br/>Node.js]
    end

    subgraph "Application Layer (Legacy)"
        LEGACY_MAIN[Mainframe Integration<br/>COBOL/CICS]
        LEGACY_BATCH[Batch Processing<br/>JCL/COBOL]
        LEGACY_REPORT[Report Generation<br/>PL/I]
    end

    subgraph "Intermediate DB Layer (Data Integration)"
        SYNC_DB1[Sync DB-1<br/>Oracle 11g<br/>Integrated DB from 3-company merger]
        SYNC_DB2[Sync DB-2<br/>DB2 z/OS<br/>Former Company A Account System]
        SYNC_DB3[Sync DB-3<br/>PostgreSQL<br/>Former Company B Account System]
        SYNC_DB4[Sync DB-4<br/>SQL Server<br/>Former Company C Account System]
        MQ_DB[Message Queue DB<br/>IBM MQ Series]
    end

    subgraph "Mainframe Layer"
        MAINFRAME[Mainframe<br/>IBM z/OS<br/>COBOL/CICS/VSAM]
        MAINFRAME_DB[Main DB<br/>DB2 z/OS<br/>Core Account System]
        TAPE[Magnetic Tape<br/>Backup/Archive]
    end

    subgraph "Legacy Middleware"
        CORBA[CORBA ORB<br/>IIOP Protocol]
        SOAP[SOAP Service<br/>Apache Axis]
        ETL1[ETL-1<br/>Informatica<br/>Daily Batch]
        ETL2[ETL-2<br/>Pentaho<br/>Real-time Integration]
        FILE_TRANSFER[File Transfer<br/>FTP/SFTP/FTPS<br/>Multiple Protocols]
    end

    subgraph "External Integration Layer"
        PAYMENT[Payment Network<br/>Zengin/BOJ-NET]
        CREDIT[Credit Bureau<br/>CIC/JICC]
        REGULATORY[Regulatory Reporting<br/>FSA/BOJ]
        PARTNER1[Partner API-1<br/>REST/GraphQL]
        PARTNER2[Partner API-2<br/>SOAP/XML]
    end

    subgraph "Audit & Log Layer"
        AUDIT_DB[Audit DB<br/>PostgreSQL<br/>7-Year Retention]
        LOG_AGG[Log Aggregation<br/>ELK Stack]
        BACKUP[Backup<br/>Veeam/Tivoli]
    end

    subgraph "Security Layer"
        FIREWALL[Firewall<br/>Multi-Stage]
        WAF[WAF<br/>F5/Cloudflare]
        IDS[Intrusion Detection<br/>Snort/Suricata]
    end

    %% Frontend → API Gateway
    WEB --> APIGW
    MOBILE --> APIGW
    ATM --> APIGW
    BRANCH --> APIGW

    %% API Gateway → Auth & Rate Limiting
    APIGW --> AUTH
    APIGW --> RATE
    AUTH --> RATE

    %% API Gateway → Application Layer (Modern)
    APIGW --> CUSTOMER
    APIGW --> PRODUCT
    APIGW --> TRANSACTION
    APIGW --> NOTIFICATION

    %% Modern Apps → Intermediate DB
    CUSTOMER --> SYNC_DB1
    CUSTOMER --> SYNC_DB2
    PRODUCT --> SYNC_DB1
    PRODUCT --> SYNC_DB3
    TRANSACTION --> SYNC_DB1
    TRANSACTION --> SYNC_DB2
    TRANSACTION --> SYNC_DB4
    NOTIFICATION --> MQ_DB

    %% Modern Apps → Legacy Integration
    CUSTOMER --> LEGACY_MAIN
    TRANSACTION --> LEGACY_MAIN
    LEGACY_MAIN --> CORBA
    LEGACY_MAIN --> SOAP

    %% Legacy → Mainframe
    CORBA --> MAINFRAME
    SOAP --> MAINFRAME
    LEGACY_BATCH --> MAINFRAME
    LEGACY_REPORT --> MAINFRAME
    MAINFRAME --> MAINFRAME_DB
    MAINFRAME --> TAPE

    %% Sync between Intermediate DBs
    SYNC_DB1 <--> ETL1
    SYNC_DB2 <--> ETL1
    SYNC_DB3 <--> ETL1
    SYNC_DB4 <--> ETL1
    SYNC_DB1 <--> ETL2
    SYNC_DB2 <--> ETL2
    MAINFRAME_DB --> ETL1
    MAINFRAME_DB --> ETL2

    %% Mainframe → Intermediate DB
    MAINFRAME --> SYNC_DB1
    MAINFRAME --> SYNC_DB2

    %% ファイル転送
    FILE_TRANSFER --> SYNC_DB1
    FILE_TRANSFER --> SYNC_DB2
    FILE_TRANSFER --> SYNC_DB3
    FILE_TRANSFER --> MAINFRAME

    %% External Integration
    TRANSACTION --> PAYMENT
    CUSTOMER --> CREDIT
    LEGACY_BATCH --> REGULATORY
    CUSTOMER --> PARTNER1
    PRODUCT --> PARTNER2

    %% Audit & Logging
    CUSTOMER --> AUDIT_DB
    TRANSACTION --> AUDIT_DB
    MAINFRAME --> AUDIT_DB
    CUSTOMER --> LOG_AGG
    TRANSACTION --> LOG_AGG
    APIGW --> LOG_AGG
    MAINFRAME_DB --> BACKUP
    SYNC_DB1 --> BACKUP
    SYNC_DB2 --> BACKUP

    %% Security
    FIREWALL --> APIGW
    WAF --> FIREWALL
    IDS --> WAF

    style MAINFRAME fill:#ff6b6b
    style MAINFRAME_DB fill:#ff6b6b
    style SYNC_DB1 fill:#ffd93d
    style SYNC_DB2 fill:#ffd93d
    style SYNC_DB3 fill:#ffd93d
    style SYNC_DB4 fill:#ffd93d
    style CORBA fill:#ff8787
    style SOAP fill:#ff8787
    style ETL1 fill:#ff8787
    style ETL2 fill:#ff8787
```　

Data Flow Diagram (Complex Dependencies)

flowchart TD
    subgraph "Customer Registration Flow"
        START[Start Registration]
        START --> WEB_CHECK[Input via Web App]
        WEB_CHECK --> APIGW_CHECK[Via API Gateway]
        APIGW_CHECK --> CUSTOMER_API[Customer Management API]
        
        CUSTOMER_API --> SYNC_DB1_WRITE[Write to Sync DB-1]
        CUSTOMER_API --> SYNC_DB2_WRITE[Write to Sync DB-2]
        
        SYNC_DB1_WRITE --> ETL_TRIGGER[ETL-1 Detects]
        ETL_TRIGGER --> MAINFRAME_SYNC[Mainframe Sync]
        MAINFRAME_SYNC --> MAINFRAME_DB_WRITE[Write to Main DB]
        
        SYNC_DB2_WRITE --> CORBA_CALL[Call Legacy System A via CORBA]
        CORBA_CALL --> LEGACY_MAIN_CALL[Legacy Main Call]
        LEGACY_MAIN_CALL --> MAINFRAME_DB_WRITE
        
        MAINFRAME_DB_WRITE --> BATCH_TRIGGER[Batch Process Trigger]
        BATCH_TRIGGER --> CREDIT_CHECK[Credit Bureau Check]
        CREDIT_CHECK --> SYNC_DB3_UPDATE[Update Sync DB-3]
        
        SYNC_DB3_UPDATE --> FILE_EXPORT[File Export]
        FILE_EXPORT --> PARTNER_SEND[Send to Partner API-2]
        
        MAINFRAME_DB_WRITE --> AUDIT_LOG[Audit Log]
        SYNC_DB1_WRITE --> AUDIT_LOG
        SYNC_DB2_WRITE --> AUDIT_LOG
        
        AUDIT_LOG --> END_FLOW[Complete]
        PARTNER_SEND --> END_FLOW
    end

    style MAINFRAME_DB_WRITE fill:#ff6b6b
    style CORBA_CALL fill:#ff8787
    style ETL_TRIGGER fill:#ff8787

```mermaid
flowchart TD
    subgraph "Customer Registration Flow"
        START[Start Registration]
        START --> WEB_CHECK[Input via Web App]
        WEB_CHECK --> APIGW_CHECK[Via API Gateway]
        APIGW_CHECK --> CUSTOMER_API[Customer Management API]
        
        CUSTOMER_API --> SYNC_DB1_WRITE[Write to Sync DB-1]
        CUSTOMER_API --> SYNC_DB2_WRITE[Write to Sync DB-2]
        
        SYNC_DB1_WRITE --> ETL_TRIGGER[ETL-1 Detects]
        ETL_TRIGGER --> MAINFRAME_SYNC[Mainframe Sync]
        MAINFRAME_SYNC --> MAINFRAME_DB_WRITE[Write to Main DB]
        
        SYNC_DB2_WRITE --> CORBA_CALL[Call Legacy System A via CORBA]
        CORBA_CALL --> LEGACY_MAIN_CALL[Legacy Main Call]
        LEGACY_MAIN_CALL --> MAINFRAME_DB_WRITE
        
        MAINFRAME_DB_WRITE --> BATCH_TRIGGER[Batch Process Trigger]
        BATCH_TRIGGER --> CREDIT_CHECK[Credit Bureau Check]
        CREDIT_CHECK --> SYNC_DB3_UPDATE[Update Sync DB-3]
        
        SYNC_DB3_UPDATE --> FILE_EXPORT[File Export]
        FILE_EXPORT --> PARTNER_SEND[Send to Partner API-2]
        
        MAINFRAME_DB_WRITE --> AUDIT_LOG[Audit Log]
        SYNC_DB1_WRITE --> AUDIT_LOG
        SYNC_DB2_WRITE --> AUDIT_LOG
        
        AUDIT_LOG --> END_FLOW[Complete]
        PARTNER_SEND --> END_FLOW
    end

    style MAINFRAME_DB_WRITE fill:#ff6b6b
    style CORBA_CALL fill:#ff8787
    style ETL_TRIGGER fill:#ff8787
```　

Database Relationship Diagram (ER Style)

erDiagram
    MAINFRAME_DB ||--o{ SYNC_DB1 : "Daily Batch Sync"
    MAINFRAME_DB ||--o{ SYNC_DB2 : "Real-time Sync"
    SYNC_DB1 ||--o{ SYNC_DB3 : "Via ETL-1"
    SYNC_DB2 ||--o{ SYNC_DB4 : "Via ETL-2"
    SYNC_DB1 ||--o{ AUDIT_DB : "Audit Log"
    SYNC_DB2 ||--o{ AUDIT_DB : "Audit Log"
    MAINFRAME_DB ||--o{ AUDIT_DB : "Audit Log"
    
    MAINFRAME_DB {
        string account_id PK
        string customer_id
        decimal balance
        datetime last_update
    }
    
    SYNC_DB1 {
        string sync_id PK
        string account_id FK
        string source_system
        json data_snapshot
        datetime sync_timestamp
    }
    
    SYNC_DB2 {
        string legacy_id PK
        string account_id FK
        string company_code
        json legacy_data
        datetime sync_timestamp
    }
    
    SYNC_DB3 {
        string product_id PK
        string account_id FK
        string product_type
        json product_data
    }
    
    SYNC_DB4 {
        string transaction_id PK
        string account_id FK
        decimal amount
        datetime transaction_date
    }
    
    AUDIT_DB {
        string audit_id PK
        string table_name
        string record_id
        string operation
        json before_data
        json after_data
        datetime audit_timestamp
    }

```mermaid
erDiagram
    MAINFRAME_DB ||--o{ SYNC_DB1 : "Daily Batch Sync"
    MAINFRAME_DB ||--o{ SYNC_DB2 : "Real-time Sync"
    SYNC_DB1 ||--o{ SYNC_DB3 : "Via ETL-1"
    SYNC_DB2 ||--o{ SYNC_DB4 : "Via ETL-2"
    SYNC_DB1 ||--o{ AUDIT_DB : "Audit Log"
    SYNC_DB2 ||--o{ AUDIT_DB : "Audit Log"
    MAINFRAME_DB ||--o{ AUDIT_DB : "Audit Log"
    
    MAINFRAME_DB {
        string account_id PK
        string customer_id
        decimal balance
        datetime last_update
    }
    
    SYNC_DB1 {
        string sync_id PK
        string account_id FK
        string source_system
        json data_snapshot
        datetime sync_timestamp
    }
    
    SYNC_DB2 {
        string legacy_id PK
        string account_id FK
        string company_code
        json legacy_data
        datetime sync_timestamp
    }
    
    SYNC_DB3 {
        string product_id PK
        string account_id FK
        string product_type
        json product_data
    }
    
    SYNC_DB4 {
        string transaction_id PK
        string account_id FK
        decimal amount
        datetime transaction_date
    }
    
    AUDIT_DB {
        string audit_id PK
        string table_name
        string record_id
        string operation
        json before_data
        json after_data
        datetime audit_timestamp
    }
```　

Technology Stack Timeline (Legacy Degree)

timeline
    title Historical Layers of the System
    
    1980s : Mainframe Introduction
          : COBOL/CICS
              : DB2 z/OS
              : VSAM Files
    
    1990s : 3-Company Merger
          : Intermediate DB-1 Introduced (Oracle)
          : CORBA Integration
          : Batch Processing Enhancement
    
    2000s : Legacy Company A System Integration
          : Intermediate DB-2 Introduced (DB2)
          : SOAP Services
          : ETL-1 Introduction
    
    2010s : Legacy Company B System Integration
          : Intermediate DB-3 Introduced (PostgreSQL)
          : Web App Launch
          : Partial REST API Introduction
    
    2020s : Legacy Company C System Integration
          : Intermediate DB-4 Introduced (SQL Server)
          : Modern API Expansion
          : Microservices Architecture Started
          : Cloud Migration Planning

```mermaid
timeline
    title Historical Layering of System
    
    1980s : Mainframe Introduction
          : COBOL/CICS
          : DB2 z/OS
          : VSAM Files
    
    1990s : 3-Company Merger
          : Intermediate DB-1 Introduced (Oracle)
          : CORBA Integration
          : Batch Processing Enhancement
    
    2000s : Legacy Company A System Integration
          : Intermediate DB-2 Introduced (DB2)
          : SOAP Services
          : ETL-1 Introduced
    
    2010s : Legacy Company B System Integration
          : Intermediate DB-3 Introduced (PostgreSQL)
          : Web App Launch
          : Partial REST API Introduction
    
    2020s : Legacy Company C System Integration
          : Intermediate DB-4 Introduced (SQL Server)
          : Modern API Expansion
          : Microservices Architecture Started
          : Cloud Migration Planning
```　

Visualizing Problem Areas

Key Challenges

  1. Data Consistency Issues

    • Four intermediate DBs are updated asynchronously
    • Synchronization timing with mainframe is inconsistent
    • Transaction boundaries are unclear

  2. Technical Debt

    • CORBA, SOAP, REST, and GraphQL coexist
    • File transfers use multiple protocols (FTP/SFTP/FTPS)
    • Legacy languages (COBOL/PL/I/JCL) and modern languages (Python/Node.js/Java) coexist

  3. Operational Complexity

    • Batch processing dependencies are complex
    • Failure impact scope is wide
    • Audit logs are distributed across multiple systems

  4. Scalability

    • Mainframe is the bottleneck
    • Intermediate DB sync delays
    • External connection timeouts

Tips

Using Japanese

You can use Japanese in nodes and labels.

graph LR
    A[ユーザー] --> B[サーバー]
    B --> C[データベース]

Split Complex Diagrams

If a diagram becomes too complex, we recommend splitting it into multiple diagrams.

When Errors Occur

If there's an error in Mermaid syntax, the diagram won't display.
Please check the following:

  • Are brackets properly matched?
  • Is the arrow syntax correct?
  • Does the node name contain special characters?

Comments

None