20
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Mermaidのflowchartでノードの形状変更や画像 / アイコンを指定する方法

Last updated at Posted at 2024-12-21

はじめに

Mermaidのバージョンアップにより、flowchartで使用できるノードの形状やアイコン、画像の指定方法が充実してきたため、備忘録としてまとめて紹介します。

また、Mermaidそのものの紹介については下記を参照ください。

ノードの形状を変える

ノードに指定できる形状として、デフォルトで使える形状(Node shapes)と拡張された形状(Expanded Node Shapes)があります。

デフォルトで使える形状(Node shapes)

デフォルトで使える形状は、記号を用いてノードの形状を指定します。

mermaid記法サンプル
flowchart
 N01[square]
 N02(round)
 N03{diamond}
 N04([stadium])
 N05>odd]
 N06[(cylinder)]
 N07(((doublecircle)))
 N08[/trapezoid\]
 N09[\inv_trapezoid/]
 N10[/lean_right/]
 N11[\lean_left\]
 N12[[subroutine]]
 M13{{hexagon}}
No 形状名 イメージ Mermaid記法
1 square [square]
2 round (round)
3 diamond {diamond}
4 stadium ([stadium])
5 odd >odd]
6 cylinder [(cylinder)]
7 doublecircle (((doublecircle)))
8 trapezoid [/trapezoid\]
9 inv_trapezoid [\inv_trapezoid/]
10 lean_right [/lean_right/]
11 lean_left [\lean_left\]
12 subroutine [[subroutine]]
13 hexagon {{hexagon}}

バージョンが上がると形状の種類も増える可能性があるので、現在使える形状は公式ドキュメントGithubのコードを参考にしてください。

拡張された形状(Expanded Node Shapes)

バージョン11.3.0から、拡張された形状(Expanded Node Shapes)が使えるようになりました。

(ノード名称)@{ shape: (形状名) }フォーマットでノードの形状を指定します。

mermaid記法サンプル
flowchart LR
  N1@{ shape: lin-cyl }
  N2@{ shape: h-cyl }
  N3@{ shape: doc }

  N1 --- N2 --- N3

また、指定できる形状は下記になります。

No 形状名 イメージ Mermaid記法
1 rect N@{ shape: rect}
2 rounded N@{ shape: rounded}
3 stadium N@{ shape: stadium}
4 fr-rect N@{ shape: fr-rect}
5 cyl N@{ shape: cyl}
6 circle N@{ shape: circle}
7 diam N@{ shape: diam}
8 hex N@{ shape: hex}
9 lean-r N@{ shape: lean-r}
10 lean-l N@{ shape: lean-l}
11 trap-b N@{ shape: trap-b}
12 trap-t N@{ shape: trap-t}
13 dbl-circ N@{ shape: dbl-circ}
14 text N@{ shape: text}
15 notch-rect N@{ shape: notch-rect}
16 lin-rect N@{ shape: lin-rect}
17 sm-circ N@{ shape: sm-circ}
18 fr-circ N@{ shape: fr-circ}
19 fork N@{ shape: fork}
20 hourglass N@{ shape: hourglass}
21 brace N@{ shape: brace}
22 brace-r N@{ shape: brace-r}
23 braces N@{ shape: braces}
24 bolt N@{ shape: bolt}
25 doc N@{ shape: doc}
26 delay N@{ shape: delay}
27 h-cyl N@{ shape: h-cyl}
28 lin-cyl N@{ shape: lin-cyl}
29 curv-trap N@{ shape: curv-trap}
30 div-rect N@{ shape: div-rect}
31 tri N@{ shape: tri}
32 win-pane N@{ shape: win-pane}
33 f-circ N@{ shape: f-circ}
34 notch-pent N@{ shape: notch-pent}
35 flip-tri N@{ shape: flip-tri}
36 sl-rect N@{ shape: sl-rect}
37 docs N@{ shape: docs}
38 st-rect N@{ shape: st-rect}
39 bow-rect N@{ shape: bow-rect}
40 cross-circ N@{ shape: cross-circ}
41 tag-doc N@{ shape: tag-doc}
42 tag-rect N@{ shape: tag-rect}
43 flag N@{ shape: flag}
44 odd N@{ shape: odd}
45 lin-doc N@{ shape: lin-doc}
mermaid記法 全ての形状
mermaid記法
flowchart
  N1@{ shape: rect, label: "rect" }
  N2@{ shape: rounded, label: "rounded" }
  N3@{ shape: stadium, label: "stadium" }
  N4@{ shape: fr-rect, label: "fr-rect" }
  N5@{ shape: cyl, label: "cyl" }
  N6@{ shape: circle, label: "circle" }
  N7@{ shape: diam, label: "diam" }
  N8@{ shape: hex, label: "hex" }
  N9@{ shape: lean-r, label: "lean-r" }
  N10@{ shape: lean-l, label: "lean-l" }
mermaid記法
flowchart
  N11@{ shape: trap-b, label: "trap-b" }
  N12@{ shape: trap-t, label: "trap-t" }
  N13@{ shape: dbl-circ, label: "dbl-circ" }
  N14@{ shape: text, label: "text" }
  N15@{ shape: notch-rect, label: "notch-rect" }
  N16@{ shape: lin-rect, label: "lin-rect" }
  N17@{ shape: sm-circ, label: "sm-circ" }
  N18@{ shape: fr-circ, label: "fr-circ" }
  N19@{ shape: fork, label: "fork" }
  N20@{ shape: hourglass, label: "hourglass" }
mermaid記法
flowchart
  N21@{ shape: brace, label: "brace" }
  N22@{ shape: brace-r, label: "brace-r" }
  N23@{ shape: braces, label: "braces" }
  N24@{ shape: bolt, label: "bolt" }
  N25@{ shape: doc, label: "doc" }
  N26@{ shape: delay, label: "delay" }
  N27@{ shape: h-cyl, label: "h-cyl" }
  N28@{ shape: lin-cyl, label: "lin-cyl" }
  N29@{ shape: curv-trap, label: "curv-trap" }
  N30@{ shape: div-rect, label: "div-rect" }
mermaid記法
flowchart
  N31@{ shape: tri, label: "tri" }
  N32@{ shape: win-pane, label: "win-pane" }
  N33@{ shape: f-circ, label: "f-circ" }
  N34@{ shape: notch-pent, label: "notch-pent" }
  N35@{ shape: flip-tri, label: "flip-tri" }
  N36@{ shape: sl-rect, label: "sl-rect" }
  N37@{ shape: docs, label: "docs" }
  N38@{ shape: st-rect, label: "st-rect" }
  N39@{ shape: bow-rect, label: "bow-rect" }
  N40@{ shape: cross-circ, label: "cross-circ" }
mermaid記法
flowchart
  N41@{ shape: tag-doc, label: "tag-doc" }
  N42@{ shape: tag-rect, label: "tag-rect" }
  N43@{ shape: flag, label: "flag" }
  N44@{ shape: odd, label: "odd" }
  N45@{ shape: lin-doc, label: "lin-doc" }

バージョンが上がると形状の種類も増える可能性があるので、現在使える形状は公式ドキュメントGithubのコードを参考にしてください。

また、v11.3.0のNew Flowchart Shapes (with new syntax) #5825 Pull Requestがありますので、詳細を追いかけたい方は参考にしてください。

ノードに画像やアイコンを使う

画像URL指定

バージョン11.3.0からノードに画像のURLを指定できるようになりました。

下記のフォーマットでノードを指定します。

画像指定フォーマット
(ノード名称)@{
    img: (画像URL),
    label: (テキストラベル),
    pos: (ラベル位置 t/b),
    w: (画像横幅),
    h: (画像縦幅),
    constraint: (アスペクト比維持 on/off)
}

画像URLにはsvgやpngなどの代表的な画像ファイルだけでなく、Webサイトのfavicon(icoファイル)なども使用できます。

mermaid記法サンプル
flowchart LR
  N1@{ img: "https://cdn.qiita.com/assets/favicons/public/production-c620d3e403342b1022967ba5e3db1aaa.ico", w: 60, h: 60, constraint: "on" }

  subgraph GC[AWS Cloud]
    N2@{ img: "https://api.iconify.design/logos/aws-elb.svg", label: "ELB", pos: "t", w: 60, h: 60, constraint: "on" }
    N3@{ img: "https://api.iconify.design/logos/aws-ecs.svg", label: "ECS", pos: "t", w: 60, h: 60, constraint: "on" }
    N4@{ img: "https://api.iconify.design/logos/aws-iam.svg", label: "IAM", pos: "t", w: 60, h: 60, constraint: "on" }
  end

  N1 --- N2 --- N3 ~~~ N4

  style GC fill:none,color:#345,stroke:#345

なお、~~~はノード同士を繋ぐリンクを非表示にする指定で、ノードの位置を変更したい場合などに活用できます。

公式ドキュメントv11.3.0New Flowchart Shapes (with new syntax) #5825 Pull Requestがありますので、詳細を追いかけたい方は参考にしてください。

アイコンパック指定

バージョン11.1.0から、IcônesなどのIconifyJSON形式のアイコンパックのSVG画像が使えるようになりました。

本手法はQiitaやGithubなどのWebサービスでは利用できません。
使用をするにはCDNから直接JSONファイルを使用するか、npmでアイコンパッケージをインストールする必要があります。

下記のフォーマットでノードの画像を指定します。

画像指定フォーマット
(ノード名称)@{
    icon: (アイコンパックのアイコン名称),
    label: (テキストラベル),
    pos: (ラベル位置 t/b),
    h: (画像縦幅)
}
htmlサンプル(CDNから直接JSONファイルを使用する方法)
<!DOCTYPE html>
<head>
  <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
  <div class="mermaid">
    flowchart LR
      N1@{ icon: "logos:slack-icon", form: "square", h: 60 }
    
      subgraph GC[AWS Cloud]
        N2@{ icon: "logos:aws-elb", form: "square", label: "ELB", pos: "t", h: 60 }
        N3@{ icon: "logos:aws-ecs", form: "square", label: "ECS", pos: "t", h: 60 }
        N4@{ icon: "logos:aws-iam", form: "square", label: "IAM", pos: "t", h: 60 }
      end
    
      N1 --- N2 --- N3 ~~~ N4
    
      style GC fill:none,color:#345,stroke:#345
  </div>
  <script>
    mermaid.registerIconPacks([
    {
        name: 'logos',
        loader: () =>
        fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
    },
    ]);
    mermaid.initialize({startOnLoad:true});
  </script>
</body>
</html>

image.png

また、自前のSVGファイルをIconifyJSON形式のアイコンパックに変換したい場合は下記を参考にしてください。

AWS画像URL・アイコン名称一覧

IcônesのアイコンパックやIconify APIの中で、AWSに関連するアイコン名称や画像URLの一覧を記載します。

画像URL指定やアイコンパック指定でAWS構成図を書く際にご利用ください。

No イメージ Icônesアイコン Iconify API URL
1 logos:aws https://api.iconify.design/logos/aws.svg
2 logos:aws-amplify https://api.iconify.design/logos/aws-amplify.svg
3 logos:aws-api-gateway https://api.iconify.design/logos/aws-api-gateway.svg
4 logos:aws-app-mesh https://api.iconify.design/logos/aws-app-mesh.svg
5 logos:aws-appflow https://api.iconify.design/logos/aws-appflow.svg
6 logos:aws-appsync https://api.iconify.design/logos/aws-appsync.svg
7 logos:aws-athena https://api.iconify.design/logos/aws-athena.svg
8 logos:aws-aurora https://api.iconify.design/logos/aws-aurora.svg
9 logos:aws-backup https://api.iconify.design/logos/aws-backup.svg
10 logos:aws-batch https://api.iconify.design/logos/aws-batch.svg
11 logos:aws-certificate-manager https://api.iconify.design/logos/aws-certificate-manager.svg
12 logos:aws-cloudformation https://api.iconify.design/logos/aws-cloudformation.svg
13 logos:aws-cloudfront https://api.iconify.design/logos/aws-cloudfront.svg
14 logos:aws-cloudsearch https://api.iconify.design/logos/aws-cloudsearch.svg
15 logos:aws-cloudtrail https://api.iconify.design/logos/aws-cloudtrail.svg
16 logos:aws-cloudwatch https://api.iconify.design/logos/aws-cloudwatch.svg
17 logos:aws-codebuild https://api.iconify.design/logos/aws-codebuild.svg
18 logos:aws-codecommit https://api.iconify.design/logos/aws-codecommit.svg
19 logos:aws-codedeploy https://api.iconify.design/logos/aws-codedeploy.svg
20 logos:aws-codepipeline https://api.iconify.design/logos/aws-codepipeline.svg
21 logos:aws-codestar https://api.iconify.design/logos/aws-codestar.svg
22 logos:aws-cognito https://api.iconify.design/logos/aws-cognito.svg
23 logos:aws-config https://api.iconify.design/logos/aws-config.svg
24 logos:aws-documentdb https://api.iconify.design/logos/aws-documentdb.svg
25 logos:aws-dynamodb https://api.iconify.design/logos/aws-dynamodb.svg
26 logos:aws-ec2 https://api.iconify.design/logos/aws-ec2.svg
27 logos:aws-ecs https://api.iconify.design/logos/aws-ecs.svg
28 logos:aws-eks https://api.iconify.design/logos/aws-eks.svg
29 logos:aws-elastic-beanstalk https://api.iconify.design/logos/aws-elastic-beanstalk.svg
30 logos:aws-elastic-cache https://api.iconify.design/logos/aws-elastic-cache.svg
31 logos:aws-elasticache https://api.iconify.design/logos/aws-elasticache.svg
32 logos:aws-elb https://api.iconify.design/logos/aws-elb.svg
33 logos:aws-eventbridge https://api.iconify.design/logos/aws-eventbridge.svg
34 logos:aws-fargate https://api.iconify.design/logos/aws-fargate.svg
35 logos:aws-glacier https://api.iconify.design/logos/aws-glacier.svg
36 logos:aws-glue https://api.iconify.design/logos/aws-glue.svg
37 logos:aws-iam https://api.iconify.design/logos/aws-iam.svg
38 logos:aws-keyspaces https://api.iconify.design/logos/aws-keyspaces.svg
39 logos:aws-kinesis https://api.iconify.design/logos/aws-kinesis.svg
40 logos:aws-kms https://api.iconify.design/logos/aws-kms.svg
41 logos:aws-lake-formation https://api.iconify.design/logos/aws-lake-formation.svg
42 logos:aws-lambda https://api.iconify.design/logos/aws-lambda.svg
43 logos:aws-lightsail https://api.iconify.design/logos/aws-lightsail.svg
44 logos:aws-mobilehub https://api.iconify.design/logos/aws-mobilehub.svg
45 logos:aws-mq https://api.iconify.design/logos/aws-mq.svg
46 logos:aws-msk https://api.iconify.design/logos/aws-msk.svg
47 logos:aws-neptune https://api.iconify.design/logos/aws-neptune.svg
48 logos:aws-open-search https://api.iconify.design/logos/aws-open-search.svg
49 logos:aws-opsworks https://api.iconify.design/logos/aws-opsworks.svg
50 logos:aws-quicksight https://api.iconify.design/logos/aws-quicksight.svg
51 logos:aws-rds https://api.iconify.design/logos/aws-rds.svg
52 logos:aws-redshift https://api.iconify.design/logos/aws-redshift.svg
53 logos:aws-route53 https://api.iconify.design/logos/aws-route53.svg
54 logos:aws-s3 https://api.iconify.design/logos/aws-s3.svg
55 logos:aws-secrets-manager https://api.iconify.design/logos/aws-secrets-manager.svg
56 logos:aws-ses https://api.iconify.design/logos/aws-ses.svg
57 logos:aws-shield https://api.iconify.design/logos/aws-shield.svg
58 logos:aws-sns https://api.iconify.design/logos/aws-sns.svg
59 logos:aws-sqs https://api.iconify.design/logos/aws-sqs.svg
60 logos:aws-step-functions https://api.iconify.design/logos/aws-step-functions.svg
61 logos:aws-systems-manager https://api.iconify.design/logos/aws-systems-manager.svg
62 logos:aws-timestream https://api.iconify.design/logos/aws-timestream.svg
63 logos:aws-vpc https://api.iconify.design/logos/aws-vpc.svg
64 logos:aws-waf https://api.iconify.design/logos/aws-waf.svg
65 logos:aws-xray https://api.iconify.design/logos/aws-xray.svg

おわりに

本記事では、Mermaidのflowchartで使用できるノード形状変更や画像、アイコンを指定の方法について紹介しました。

特にシステム構成やアーキテクチャの可視化を目的とした内容を紹介しましたが、v11.1.0以降ではArchitecture Diagrams(β版)が利用可能となっています。今後、この機能が実用段階まで拡充されれば、flowchartからArchitecture Diagramsへの移行を検討するのも良いかもしれません。

詳細は公式ドキュメントをご覧ください。

20
10
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
20
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?