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
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 flowchartgraph 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
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
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
}
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 ManyPK: Primary KeyFK: 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
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
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
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 --> [*]
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
"中間層（Java/Spring）" : 15
"その他" : 10
pie title システム構成の技術スタック
"レガシー（COBOL/CICS）" : 40
"モダン（Python/Node.js）" : 35
"Middleware (Java/Spring)" : 15
"Other" : 10
Styling
Node Coloring
graph TD
A[通常] --> B[警告]
B --> C[成功]
C --> D[エラー]
style A fill:#e1f5ff
style B fill:#fff4e1
style C fill:#e1ffe1
style D fill:#ffe1e1
graph TD
A[通常] --> B[警告]
B --> C[成功]
C --> D[エラー]
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
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 "ユーザー層"
WEB[Webアプリ]
MOBILE[モバイルアプリ]
end
subgraph "API層"
GATEWAY[API Gateway]
AUTH[認証サービス]
end
subgraph "アプリケーション層"
APP1[アプリ1]
APP2[アプリ2]
end
subgraph "データ層"
DB1[(データベース1)]
DB2[(データベース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
graph TB
subgraph "ユーザー層"
WEB[Webアプリ]
MOBILE[モバイルアプリ]
end
subgraph "API層"
GATEWAY[API Gateway]
AUTH[認証サービス]
end
subgraph "アプリケーション層"
APP1[アプリ1]
APP2[アプリ2]
end
subgraph "データ層"
DB1[(データベース1)]
DB2[(データベース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
-
Prioritize Readability
- Avoid overly long labels
- Group appropriately with subgraphs
-
Color Usage
- Unify colors by layer
- Use prominent colors for important nodes
-
Direction
TD(Top to Down): Common flowchartsLR(Left to Right): Timelines and processesBT(Bottom to Top): Hierarchical structuresRL(Right to Left): Special cases
-
Split Complex Diagrams
- Don't cram too much into one diagram
- Split into multiple diagrams and supplement with explanatory text
Reference Links
- Mermaid Official Documentation
- Mermaid Live Editor - Real-time preview editor
- Mermaid Support on GitHub
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/>リアルタイム連携]
FILE_TRANSFER[ファイル転送<br/>FTP/SFTP/FTPS<br/>複数プロトコル混在]
end
subgraph "外部連携層"
PAYMENT[決済ネットワーク<br/>Zengin/全銀システム]
CREDIT[信用情報機関<br/>CIC/JICC]
REGULATORY[規制報告<br/>金融庁/日銀]
PARTNER1[パートナーAPI-1<br/>REST/GraphQL]
PARTNER2[パートナーAPI-2<br/>SOAP/XML]
end
subgraph "監査・ログ層"
AUDIT_DB[監査DB<br/>PostgreSQL<br/>7年保存]
LOG_AGG[ログ集約<br/>ELK Stack]
BACKUP[バックアップ<br/>Veeam/Tivoli]
end
subgraph "セキュリティ層"
FIREWALL[ファイアウォール<br/>複数段階]
WAF[WAF<br/>F5/Cloudflare]
IDS[侵入検知<br/>Snort/Suricata]
end
%% フロントエンド → API Gateway
WEB --> APIGW
MOBILE --> APIGW
ATM --> APIGW
BRANCH --> APIGW
%% API Gateway → 認証・レート制限
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
%% レガシー → メインフレーム
CORBA --> MAINFRAME
SOAP --> MAINFRAME
LEGACY_BATCH --> MAINFRAME
LEGACY_REPORT --> MAINFRAME
MAINFRAME --> MAINFRAME_DB
MAINFRAME --> TAPE
%% 中間DB間の同期
SYNC_DB1 <--> ETL1
SYNC_DB2 <--> ETL1
SYNC_DB3 <--> ETL1
SYNC_DB4 <--> ETL1
SYNC_DB1 <--> ETL2
SYNC_DB2 <--> ETL2
MAINFRAME_DB --> ETL1
MAINFRAME_DB --> ETL2
%% メインフレーム → 中間DB
MAINFRAME --> SYNC_DB1
MAINFRAME --> SYNC_DB2
%% ファイル転送
FILE_TRANSFER --> SYNC_DB1
FILE_TRANSFER --> SYNC_DB2
FILE_TRANSFER --> SYNC_DB3
FILE_TRANSFER --> MAINFRAME
%% 外部連携
TRANSACTION --> PAYMENT
CUSTOMER --> CREDIT
LEGACY_BATCH --> REGULATORY
CUSTOMER --> PARTNER1
PRODUCT --> PARTNER2
%% 監査・ログ
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
%% セキュリティ
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
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サービス<br/>Apache Axis]
ETL1[ETL-1<br/>Informatica<br/>日次バッチ]
ETL2[ETL-2<br/>Pentaho<br/>リアルタイム連携]
FILE_TRANSFER[ファイル転送<br/>FTP/SFTP/FTPS<br/>複数プロトコル混在]
end
subgraph "外部連携層"
PAYMENT[決済ネットワーク<br/>Zengin/全銀システム]
CREDIT[信用情報機関<br/>CIC/JICC]
REGULATORY[規制報告<br/>金融庁/日銀]
PARTNER1[パートナーAPI-1<br/>REST/GraphQL]
PARTNER2[パートナーAPI-2<br/>SOAP/XML]
end
subgraph "監査・ログ層"
AUDIT_DB[監査DB<br/>PostgreSQL<br/>7年保存]
LOG_AGG[ログ集約<br/>ELK Stack]
BACKUP[バックアップ<br/>Veeam/Tivoli]
end
subgraph "セキュリティ層"
FIREWALL[ファイアウォール<br/>複数段階]
WAF[WAF<br/>F5/Cloudflare]
IDS[侵入検知<br/>Snort/Suricata]
end
%% フロントエンド → API Gateway
WEB --> APIGW
MOBILE --> APIGW
ATM --> APIGW
BRANCH --> APIGW
%% API Gateway → 認証・レート制限
APIGW --> AUTH
APIGW --> RATE
AUTH --> RATE
%% API Gateway → アプリケーション層（モダン）
APIGW --> CUSTOMER
APIGW --> PRODUCT
APIGW --> TRANSACTION
APIGW --> NOTIFICATION
%% モダンアプリ → 中間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
%% モダンアプリ → レガシー連携
CUSTOMER --> LEGACY_MAIN
TRANSACTION --> LEGACY_MAIN
LEGACY_MAIN --> CORBA
LEGACY_MAIN --> SOAP
%% レガシー → メインフレーム
CORBA --> MAINFRAME
SOAP --> MAINFRAME
LEGACY_BATCH --> MAINFRAME
LEGACY_REPORT --> MAINFRAME
MAINFRAME --> MAINFRAME_DB
MAINFRAME --> TAPE
%% 中間DB間の同期
SYNC_DB1 <--> ETL1
SYNC_DB2 <--> ETL1
SYNC_DB3 <--> ETL1
SYNC_DB4 <--> ETL1
SYNC_DB1 <--> ETL2
SYNC_DB2 <--> ETL2
MAINFRAME_DB --> ETL1
MAINFRAME_DB --> ETL2
%% メインフレーム → 中間DB
MAINFRAME --> SYNC_DB1
MAINFRAME --> SYNC_DB2
%% ファイル転送
FILE_TRANSFER --> SYNC_DB1
FILE_TRANSFER --> SYNC_DB2
FILE_TRANSFER --> SYNC_DB3
FILE_TRANSFER --> MAINFRAME
%% 外部連携
TRANSACTION --> PAYMENT
CUSTOMER --> CREDIT
LEGACY_BATCH --> REGULATORY
CUSTOMER --> PARTNER1
PRODUCT --> PARTNER2
%% 監査・ログ
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
%% セキュリティ
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
データフロー図（複雑な依存関係）
flowchart TD
subgraph "顧客登録フロー"
START[顧客登録開始]
START --> WEB_CHECK[Webアプリで入力]
WEB_CHECK --> APIGW_CHECK[API Gateway経由]
APIGW_CHECK --> CUSTOMER_API[顧客管理API]
CUSTOMER_API --> SYNC_DB1_WRITE[同期DB-1に書き込み]
CUSTOMER_API --> SYNC_DB2_WRITE[同期DB-2に書き込み]
SYNC_DB1_WRITE --> ETL_TRIGGER[ETL-1が検知]
ETL_TRIGGER --> MAINFRAME_SYNC[メインフレーム同期]
MAINFRAME_SYNC --> MAINFRAME_DB_WRITE[メインDB書き込み]
SYNC_DB2_WRITE --> CORBA_CALL[CORBA経由で旧A社システム呼び出し]
CORBA_CALL --> LEGACY_MAIN_CALL[レガシーメイン呼び出し]
LEGACY_MAIN_CALL --> MAINFRAME_DB_WRITE
MAINFRAME_DB_WRITE --> BATCH_TRIGGER[バッチ処理トリガー]
BATCH_TRIGGER --> CREDIT_CHECK[信用情報機関チェック]
CREDIT_CHECK --> SYNC_DB3_UPDATE[同期DB-3更新]
SYNC_DB3_UPDATE --> FILE_EXPORT[ファイルエクスポート]
FILE_EXPORT --> PARTNER_SEND[パートナーAPI-2送信]
MAINFRAME_DB_WRITE --> AUDIT_LOG[監査ログ記録]
SYNC_DB1_WRITE --> AUDIT_LOG
SYNC_DB2_WRITE --> AUDIT_LOG
AUDIT_LOG --> END_FLOW[完了]
PARTNER_SEND --> END_FLOW
end
style MAINFRAME_DB_WRITE fill:#ff6b6b
style CORBA_CALL fill:#ff8787
style ETL_TRIGGER fill:#ff8787
flowchart TD
subgraph "顧客登録フロー"
START[顧客登録開始]
START --> WEB_CHECK[Webアプリで入力]
WEB_CHECK --> APIGW_CHECK[API Gateway経由]
APIGW_CHECK --> CUSTOMER_API[顧客管理API]
CUSTOMER_API --> SYNC_DB1_WRITE[同期DB-1に書き込み]
CUSTOMER_API --> SYNC_DB2_WRITE[同期DB-2に書き込み]
SYNC_DB1_WRITE --> ETL_TRIGGER[ETL-1が検知]
ETL_TRIGGER --> MAINFRAME_SYNC[メインフレーム同期]
MAINFRAME_SYNC --> MAINFRAME_DB_WRITE[メインDB書き込み]
SYNC_DB2_WRITE --> CORBA_CALL[CORBA経由で旧A社システム呼び出し]
CORBA_CALL --> LEGACY_MAIN_CALL[レガシーメイン呼び出し]
LEGACY_MAIN_CALL --> MAINFRAME_DB_WRITE
MAINFRAME_DB_WRITE --> BATCH_TRIGGER[バッチ処理トリガー]
BATCH_TRIGGER --> CREDIT_CHECK[信用情報機関チェック]
CREDIT_CHECK --> SYNC_DB3_UPDATE[同期DB-3更新]
SYNC_DB3_UPDATE --> FILE_EXPORT[ファイルエクスポート]
FILE_EXPORT --> PARTNER_SEND[パートナーAPI-2送信]
MAINFRAME_DB_WRITE --> AUDIT_LOG[監査ログ記録]
SYNC_DB1_WRITE --> AUDIT_LOG
SYNC_DB2_WRITE --> AUDIT_LOG
AUDIT_LOG --> END_FLOW[完了]
PARTNER_SEND --> END_FLOW
end
style MAINFRAME_DB_WRITE fill:#ff6b6b
style CORBA_CALL fill:#ff8787
style ETL_TRIGGER fill:#ff8787
データベース関係図（ER風）
erDiagram
MAINFRAME_DB ||--o{ SYNC_DB1 : "日次バッチ同期"
MAINFRAME_DB ||--o{ SYNC_DB2 : "リアルタイム同期"
SYNC_DB1 ||--o{ SYNC_DB3 : "ETL-1経由"
SYNC_DB2 ||--o{ SYNC_DB4 : "ETL-2経由"
SYNC_DB1 ||--o{ AUDIT_DB : "監査ログ"
SYNC_DB2 ||--o{ AUDIT_DB : "監査ログ"
MAINFRAME_DB ||--o{ AUDIT_DB : "監査ログ"
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
}
erDiagram
MAINFRAME_DB ||--o{ SYNC_DB1 : "日次バッチ同期"
MAINFRAME_DB ||--o{ SYNC_DB2 : "リアルタイム同期"
SYNC_DB1 ||--o{ SYNC_DB3 : "ETL-1経由"
SYNC_DB2 ||--o{ SYNC_DB4 : "ETL-2経由"
SYNC_DB1 ||--o{ AUDIT_DB : "監査ログ"
SYNC_DB2 ||--o{ AUDIT_DB : "監査ログ"
MAINFRAME_DB ||--o{ AUDIT_DB : "監査ログ"
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
}
技術スタックの時系列（レガシー度）
timeline
title システムの歴史的積層
1980年代 : メインフレーム導入
: COBOL/CICS
: DB2 z/OS
: VSAMファイル
1990年代 : 3社合併
: 中間DB-1導入（Oracle）
: CORBA連携
: バッチ処理強化
2000年代 : 旧A社システム統合
: 中間DB-2導入（DB2）
: SOAPサービス
: ETL-1導入
2010年代 : 旧B社システム統合
: 中間DB-3導入（PostgreSQL）
: Webアプリ開始
: REST API一部導入
2020年代 : 旧C社システム統合
: 中間DB-4導入（SQL Server）
: モダンAPI拡大
: マイクロサービス化開始
: クラウド移行検討
timeline
title システムの歴史的積層
1980年代 : メインフレーム導入
: COBOL/CICS
: DB2 z/OS
: VSAMファイル
1990年代 : 3社合併
: 中間DB-1導入（Oracle）
: CORBA連携
: バッチ処理強化
2000年代 : 旧A社システム統合
: 中間DB-2導入（DB2）
: SOAPサービス
: ETL-1導入
2010年代 : 旧B社システム統合
: 中間DB-3導入（PostgreSQL）
: Webアプリ開始
: REST API一部導入
2020年代 : 旧C社システム統合
: 中間DB-4導入（SQL Server）
: モダンAPI拡大
: マイクロサービス化開始
: クラウド移行検討
問題点の可視化
主な課題
-
データ整合性の問題
- 4つの中間DBが非同期で更新される
- メインフレームとの同期タイミングがバラバラ
- トランザクション境界が不明確
-
技術的負債
- CORBA、SOAP、REST、GraphQLが混在
- ファイル転送が複数プロトコル（FTP/SFTP/FTPS）
- レガシー言語（COBOL/PL/I/JCL）とモダン言語（Python/Node.js/Java）の混在
-
運用の複雑さ
- バッチ処理の依存関係が複雑
- 障害時の影響範囲が広い
- 監査ログが複数システムに分散
-
スケーラビリティ
- メインフレームがボトルネック
- 中間DBの同期遅延
- 外部連携のタイムアウト
Tips
日本語を使う
ノードやラベルに日本語を使用できます。
graph LR
A[ユーザー] --> B[サーバー]
B --> C[データベース]
複雑な図は分割
1つの図が複雑になりすぎる場合は、複数の図に分割することをおすすめします。
エラーが出たら
Mermaid記法にエラーがあると、図が表示されません。
以下を確認してください：
- 括弧の対応が正しいか
- 矢印の記法が正しいか
- ノード名に特殊文字が含まれていないか
Comments