Mermaind でシステム構成図を作ってみる

flowchart

%%---グループの設定---

%%Storage関連のグループ
subgraph GST[Storage関連]
  ST1[(S3)]
  ST2[(EBS)]
  ST3[(EFS)]
end

%%Database関連のグループ
subgraph GDB[Database関連]
  DB1[(RDS)]
  DB2[(Redshift)]
  DB3[(ElastiCacke)]
end

%%Compute関連のグループ
subgraph GCP[Compute関連]
  CP1(EC2)
  CP2(ECS)
  CP3(Lambda)
end

%%Network関連のグループ
subgraph GNW[Network関連]
  NW1{{ELB}}
  NW2{{API Gateway}}
  NW3{{Kinesis}}
end

%%外部要素のグループ
subgraph GOU[外部要素]
  OU1[Users]
  OU2[Server]
  OU3[Client]
end

%%---スタイルの設定---

%%外部要素のスタイル
classDef SOU fill:#aaa,color:#fff,stroke:#fff
class OU1,OU2,OU3 SOU

%%Network関連のスタイル
classDef SNW fill:#84d,color:#fff,stroke:none
class NW1,NW2,NW3 SNW

%%Compute関連のスタイル
classDef SCP fill:#e83,color:#fff,stroke:none
class CP1,CP2,CP3 SCP

%%DB関連のスタイル
classDef SDB fill:#46d,color:#fff,stroke:#fff
class DB1,DB2,DB3 SDB

%%Storage関連のスタイル
classDef SST fill:#493,color:#fff,stroke:#fff
class ST1,ST2,ST3 SST

%%グループのスタイル
classDef SG fill:none,color:#666,stroke:#aaa
class GST,GDB,GCP,GNW,GOU SG

flowchart LR

%%外部要素のUser
OU1[User]

%%グループとサービス
subgraph GC[AWS]
  subgraph GV[vpc-sc1]
    subgraph GS1[subnet-1]
      NW1{{"ELB<br>web1"}}
    end
    subgraph GS2[subnet-2]
      CP1("EC2<br>web1")
    end
    DB1[("RDS<br>db1")]
  end
  ST1[("S3<br>xx.com")]
end

%%サービス同士の関係
OU1 --> NW1
NW1 --> CP1
CP1 --> DB1
DB1 -.-> ST1

%%グループのスタイル
classDef SGC fill:none,color:#345,stroke:#345
class GC SGC

classDef SGV fill:none,color:#0a0,stroke:#0a0
class GV SGV

classDef SGPrS fill:#def,color:#07b,stroke:none
class GS2 SGPrS

classDef SGPuS fill:#efe,color:#092,stroke:none
class GS1 SGPuS

%%サービスのスタイル
classDef SOU fill:#aaa,color:#fff,stroke:#fff
class OU1 SOU

classDef SNW fill:#84d,color:#fff,stroke:none
class NW1 SNW

classDef SCP fill:#e83,color:#fff,stroke:none
class CP1 SCP

classDef SDB fill:#46d,color:#fff,stroke:#fff
class DB1 SDB

classDef SST fill:#493,color:#fff,stroke:#fff
class ST1 SST

%%{init:{'themeVariables':{'lineColor':'#000ff'}}}%%
flowchart TB
subgraph GV1[vpc-xxx]
 subgraph GA1_1[ap-northeast-1a]
  subgraph GS1_1_1[subnet-xxx]
   CP1_1_1_1(tag:xxx<br>id:i-xxx<br>ip:xxx)
   CP1_1_1_2(tag:xxx<br>id:i-xxx<br>ip:xxx)
   CP1_1_1_1---CP1_1_1_2
  end
 end
end
GV1---GV2
subgraph GV2[vpc-xxx]
 subgraph GA2_1[ap-northeast-1a]
  subgraph GS2_1_1[subnet-xxx]
   CP2_1_1_1(tag:xxx<br>id:i-xxx<br>ip:xxx)
   CP2_1_1_2(tag:xxx<br>id:i-xxx<br>ip:xxx)
   CP2_1_1_1---CP2_1_1_2
  end
  subgraph GS2_1_2[subnet-xxx]
   CP2_1_2_1(tag:xxx<br>id:i-xxx<br>ip:xxx)
   CP2_1_2_2(tag:xxx<br>id:i-xxx<br>ip:xxx)
   CP2_1_2_3(tag:xxx<br>id:i-xxx<br>ip:xxx)
  end
 end
end
classDef SGV fill:none,color:#0a0,stroke:#0a0
classDef SGA fill:none,color:#59d,stroke:#59d,stroke-width:1px,stroke-dasharray:8
classDef SGS fill:#def,color:#07b,stroke:none
classDef SCP fill:#e83,color:#fff,stroke:none
class GV1,GV2 SGV
class GS1_1_1,GS2_1_1,GS2_1_2 SGS
class GA1_1,GA2_1 SGA
class CP1_1_1_1,CP1_1_1_2,CP2_1_1_1,CP2_1_1_2,CP2_1_2_1,CP2_1_2_2,CP2_1_2_3 SCP