0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@YoshijiGates

MermaidのアーキテクチャダイアグラムでAWSアイコンを使う

0
Posted at

1. はじめに

Mermaid の architecture-beta 記法を使うと、AWSのアイコンを含むアーキテクチャ図を コードだけ で描くことができます。

この記事では、利用できるAWSサービスのアイコン一覧と、実際のMermaidコードの書き方を紹介します。

architecture-beta はMermaid v11以降で利用可能な機能です。古いバージョンでは動作しないのでご注意ください。

2. 開発環境

  • Visual Studio Code
  • Windows 11

3. 基本的な書き方

architecture-beta では、以下の構文でアイコン付きのサービスノードを定義します。

architecture-beta
    service <id>(<アイコン名>)[<表示名>]

グループにまとめたい場合は group を使います。

architecture-beta
    group mygroup[グループ名]
        service myservice(logos:aws-ec2)[EC2] in mygroup

4. アイコン名の形式

AWSアイコンは Iconify の logos コレクションを利用します。

logos:aws-<サービス名>

例：logos:aws-ec2、logos:aws-s3、logos:aws-lambda

5. アイコン一覧

コンピューティング (Compute)

アイコン サービス名 アイコン名
EC2 logos:aws-ec2
ECS logos:aws-ecs
EKS logos:aws-eks
Lambda logos:aws-lambda
Fargate logos:aws-fargate
Elastic Beanstalk logos:aws-elastic-beanstalk
Batch logos:aws-batch
Lightsail logos:aws-lightsail

ストレージ (Storage)

アイコン サービス名 アイコン名
S3 logos:aws-s3
Glacier logos:aws-glacier
Backup logos:aws-backup

データベース (Database)

アイコン サービス名 アイコン名
RDS logos:aws-rds
Aurora logos:aws-aurora
DynamoDB logos:aws-dynamodb
ElastiCache logos:aws-elasticache
Neptune logos:aws-neptune
Redshift logos:aws-redshift
DocumentDB logos:aws-documentdb
Keyspaces logos:aws-keyspaces
Timestream logos:aws-timestream

ネットワーキング (Networking)

アイコン サービス名 アイコン名
VPC logos:aws-vpc
ELB logos:aws-elb
CloudFront logos:aws-cloudfront
Route 53 logos:aws-route53
API Gateway logos:aws-api-gateway
App Mesh logos:aws-app-mesh
WAF logos:aws-waf
Shield logos:aws-shield

開発者ツール (Developer Tools)

アイコン サービス名 アイコン名
CodeBuild logos:aws-codebuild
CodeCommit logos:aws-codecommit
CodeDeploy logos:aws-codedeploy
CodePipeline logos:aws-codepipeline
CodeStar logos:aws-codestar
XRay logos:aws-xray
Amplify logos:aws-amplify

分析 (Analytics)

アイコン サービス名 アイコン名
Athena logos:aws-athena
Glue logos:aws-glue
Kinesis logos:aws-kinesis
QuickSight logos:aws-quicksight
Lake Formation logos:aws-lake-formation
OpenSearch logos:aws-open-search
MSK logos:aws-msk

セキュリティ (Security)

アイコン サービス名 アイコン名
IAM logos:aws-iam
KMS logos:aws-kms
Cognito logos:aws-cognito
Secrets Manager logos:aws-secrets-manager
Certificate Manager logos:aws-certificate-manager

管理 (Management)

アイコン サービス名 アイコン名
CloudWatch logos:aws-cloudwatch
CloudTrail logos:aws-cloudtrail
CloudFormation logos:aws-cloudformation
Config logos:aws-config
Systems Manager logos:aws-systems-manager
OpsWorks logos:aws-opsworks
CloudSearch logos:aws-cloudsearch

統合 (Integration)

アイコン サービス名 アイコン名
SNS logos:aws-sns
SQS logos:aws-sqs
MQ logos:aws-mq
SES logos:aws-ses
EventBridge logos:aws-eventbridge
Step Functions logos:aws-step-functions
AppFlow logos:aws-appflow
AppSync logos:aws-appsync

汎用コンポーネント (Generic Components)

AWSサービス以外に、Mermaidに組み込まれている汎用アイコンも使えます。

アイコン 用途 アイコン名
クラウド全般 cloud
インターネット / エンドユーザー internet
ストレージ disk
サーバー / オンプレミス server
データベース全般 database

6. カテゴリ別アイコン一覧（Mermaidコード）

各カテゴリのアイコンをMermaidで確認できるコードです。

Compute

architecture-beta
    group compute[Compute]
        service ec2(logos:aws-ec2)[EC2] in compute
        service ecs(logos:aws-ecs)[ECS] in compute
        service eks(logos:aws-eks)[EKS] in compute
        service lambda(logos:aws-lambda)[Lambda] in compute
        service fargate(logos:aws-fargate)[Fargate] in compute
        service beanstalk(logos:aws-elastic-beanstalk)[Elastic Beanstalk] in compute
        service batch(logos:aws-batch)[Batch] in compute
        service lightsail(logos:aws-lightsail)[Lightsail] in compute

Storage

architecture-beta
    group storage[Storage]
        service s3(logos:aws-s3)[S3] in storage
        service glacier(logos:aws-glacier)[Glacier] in storage
        service backup(logos:aws-backup)[Backup] in storage

Database

architecture-beta
    group database[Database]
        service rds(logos:aws-rds)[RDS] in database
        service aurora(logos:aws-aurora)[Aurora] in database
        service dynamodb(logos:aws-dynamodb)[DynamoDB] in database
        service elasticache(logos:aws-elasticache)[ElastiCache] in database
        service neptune(logos:aws-neptune)[Neptune] in database
        service redshift(logos:aws-redshift)[Redshift] in database
        service documentdb(logos:aws-documentdb)[DocumentDB] in database
        service keyspaces(logos:aws-keyspaces)[Keyspaces] in database
        service timestream(logos:aws-timestream)[Timestream] in database

Networking

architecture-beta
    group networking[Networking]
        service vpc(logos:aws-vpc)[VPC] in networking
        service elb(logos:aws-elb)[ELB] in networking
        service cloudfront(logos:aws-cloudfront)[CloudFront] in networking
        service route53(logos:aws-route53)[Route 53] in networking
        service apigateway(logos:aws-api-gateway)[API Gateway] in networking
        service appmesh(logos:aws-app-mesh)[App Mesh] in networking
        service waf(logos:aws-waf)[WAF] in networking
        service shield(logos:aws-shield)[Shield] in networking

Developer Tools

architecture-beta
    group devtools[Developer Tools]
        service codebuild(logos:aws-codebuild)[CodeBuild] in devtools
        service codecommit(logos:aws-codecommit)[CodeCommit] in devtools
        service codedeploy(logos:aws-codedeploy)[CodeDeploy] in devtools
        service codepipeline(logos:aws-codepipeline)[CodePipeline] in devtools
        service codestar(logos:aws-codestar)[CodeStar] in devtools
        service xray(logos:aws-xray)[XRay] in devtools
        service amplify(logos:aws-amplify)[Amplify] in devtools

Analytics

architecture-beta
    group analytics[Analytics]
        service athena(logos:aws-athena)[Athena] in analytics
        service glue(logos:aws-glue)[Glue] in analytics
        service kinesis(logos:aws-kinesis)[Kinesis] in analytics
        service quicksight(logos:aws-quicksight)[QuickSight] in analytics
        service lakeformation(logos:aws-lake-formation)[Lake Formation] in analytics
        service opensearch(logos:aws-open-search)[OpenSearch] in analytics
        service msk(logos:aws-msk)[MSK] in analytics

Security

architecture-beta
    group security[Security]
        service iam(logos:aws-iam)[IAM] in security
        service kms(logos:aws-kms)[KMS] in security
        service cognito(logos:aws-cognito)[Cognito] in security
        service secretsmanager(logos:aws-secrets-manager)[Secrets Manager] in security
        service certmanager(logos:aws-certificate-manager)[Cert Manager] in security

Management

architecture-beta
    group management[Management]
        service cloudwatch(logos:aws-cloudwatch)[CloudWatch] in management
        service cloudtrail(logos:aws-cloudtrail)[CloudTrail] in management
        service cloudformation(logos:aws-cloudformation)[CloudFormation] in management
        service config(logos:aws-config)[Config] in management
        service systemsmanager(logos:aws-systems-manager)[Systems Manager] in management
        service opsworks(logos:aws-opsworks)[OpsWorks] in management
        service cloudsearch(logos:aws-cloudsearch)[CloudSearch] in management

Integration

architecture-beta
    group integration[Integration]
        service sns(logos:aws-sns)[SNS] in integration
        service sqs(logos:aws-sqs)[SQS] in integration
        service mq(logos:aws-mq)[MQ] in integration
        service ses(logos:aws-ses)[SES] in integration
        service eventbridge(logos:aws-eventbridge)[EventBridge] in integration
        service stepfunctions(logos:aws-step-functions)[Step Functions] in integration
        service appflow(logos:aws-appflow)[AppFlow] in integration
        service appsync(logos:aws-appsync)[AppSync] in integration

Generic Components

architecture-beta
    group generic[Generic Components]
        service cloud(cloud)[Cloud] in generic
        service internet(internet)[Internet] in generic
        service disk(disk)[Disk] in generic
        service server(server)[Server] in generic
        service db(database)[DB] in generic
        service onprem_server(server)[OnPrem Server] in generic
        service onprem_db(database)[OnPrem DB] in generic
        service onprem_disk(disk)[OnPrem Storage] in generic
        service user_internet(internet)[End User] in generic
        service user_cloud(cloud)[Enterprise] in generic

7. まとめ

ポイント 内容
使う記法 architecture-beta
AWSアイコンの形式 logos:aws-<サービス名>
汎用アイコン cloud / internet / disk / server / database
Mermaidの最低バージョン v11以上

コードだけでアイコン付きのAWSアーキテクチャ図が描けるのは、ドキュメントやREADMEへの埋め込みにとても便利です。ぜひ活用してみてください。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?