ホーム

GatsbyブログにPlantUMLを導入する

導入

シーケンス図を簡易的に書くツールとしてPlantUMLがあります。
本日はPlantUMLをGatsbyブログに導入していこうと思います。

目次

  1. PlantUMLとは
  2. Javaのインストール
  3. Graphvizのインストール
  4. gatsby-remark-plantumlのインストール
  5. gatsby-config.js修正
  6. 動作確認

PlantUMLとは

PlantUMLは、以下のようなダイアグラムを素早く作成するためのコンポーネントです。

  • シーケンス図
  • ユースケース図
  • クラス図
  • アクティビティ図
  • コンポーネント図
  • 状態遷移図
  • オブジェクト図

マークダウンのような文法を書くことでシーケンス図などを記載でき、テキストベースなのでGitでバージョン管理できる点がメリットです。
多くはVisual Studio Codeに拡張機能を導入し、.puファイルを作成して利用することが一般的かと思います。
例えば.puファイルに以下のように記載します。

@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml

これを画像として出力すると、以下のようなシーケンス図が表示されます。

AliceAliceBobBobAuthentication RequestAuthentication ResponseAnother authentication RequestAnother authentication Response

本日はこの機能をGatsbyブログに導入していきます。
Gatsbyの公式からgatsby-remark-plantumlというプラグインが出ているので、これを使用していきます。

公式ページのインストール手順をもとに環境をセットアップしていきます。

Javaのインストール

PlantUMLを使用するにはローカル環境にjavaをインストールする必要があります。
インストール方法についてはこちらの記事を参照してください。

Graphvizのインストール

PlantUMLでシーケンス図を書くだけであれば、Graphvizは不要なのですが、公式ページには以下の記載があります。

this is not optional as the plugin can’t tell if you plan to only create sequence or activity (beta) diagrams

シーケンス図しか書くのかわからないから、Graphvizの設定はnot optionalだよ、的な意味だと思うので、どうやら必須のようです。
Graphvizのインストール方法についてはこちらの記事を参照してください。

gatsby-remark-plantumlのインストール

PlantUMLで記載したコードブロックをSVGイメージに変換するためにGatsby Remarkプラグインをインストールします。

ScreenShot 2020-09-07 8.09.16.png

npm install --save gatsby-transformer-remark gatsby-remark-plantuml
//実行ログ
rui@ruinoMacBook-Pro gatsby-r-blog % npm install --save gatsby-transformer-remark gatsby-remark-plantuml
npm WARN @pmmmwh/react-refresh-webpack-plugin@0.4.1 requires a peer of react-refresh@^0.8.3 but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/eslint-plugin@2.34.0 requires a peer of eslint@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/parser@2.34.0 requires a peer of eslint@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN connected-react-router@6.8.0 requires a peer of seamless-immutable@^7.1.3 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-config-react-app@5.2.1 requires a peer of eslint@6.x but none is installed. You must install peer dependencies yourself.
npm WARN eslint-loader@2.2.1 requires a peer of eslint@>=1.6.0 <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-react-hooks@1.7.0 requires a peer of eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN gatsby-interface@0.0.166 requires a peer of gatsby@2.6.0 but none is installed. You must install peer dependencies yourself.
npm WARN gatsby-interface@0.0.166 requires a peer of react@16.8.1 but none is installed. You must install peer dependencies yourself.
npm WARN gatsby-interface@0.0.166 requires a peer of react-dom@16.8.1 but none is installed. You must install peer dependencies yourself.
npm WARN gatsby-remark-katex@3.3.11 requires a peer of katex@^0.10.0 but none is installed. You must install peer dependencies yourself.
npm WARN netlify-cms-widget-code@1.2.2 requires a peer of codemirror@^5.46.0 but none is installed. You must install peer dependencies yourself.
npm WARN netlify-cms-widget-list@2.6.3 requires a peer of netlify-cms-lib-widgets@^1.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN netlify-cms-widget-relation@2.8.3 requires a peer of netlify-cms-lib-widgets@^1.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-codemirror2@6.0.1 requires a peer of codemirror@5.x but none is installed. You must install peer dependencies yourself.
npm WARN react-redux@4.4.10 requires a peer of redux@^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN theme-ui@0.2.52 requires a peer of @mdx-js/react@^1.0.0 but none is installed. You must install peer dependencies yourself.

+ gatsby-transformer-remark@2.8.32
+ gatsby-remark-plantuml@0.7.0
added 4 packages from 40 contributors, removed 27 packages, updated 1 package and audited 3544 packages in 25.681s

207 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

rui@ruinoMacBook-Pro gatsby-r-blog %

gatsby-config.js修正

gatsby-transformer-remark用設定追加

gatsby-remark-plantumlの設定をgatsby-config.jsに追加します。
読み込みの関係でgatsby-remark-prismjsより前に設定する必要があるようです。

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: 'gatsby-transformer-remark',
          options: {
            plugins: [
              ・・・
              {
                resolve: 'gatsby-remark-plantuml',
                options: {
                  maxWidth: '480',
                  attributes: 'max-width: 480;'
                }
              },
              'gatsby-remark-prismjs',
              ・・・
            ]
          }
        },
      ],
    },
  },
]

動作確認

これで設定は完了です。
mdファイルににPlantUMLの文法に沿って、以下のようにソースを記載します。

ScreenShot 2020-09-09 0.18.37.png

設定できていれば以下のようなシーケンス図が表示されるはずです!

AliceAliceBobBobAuthentication RequestAuthentication ResponseAnother authentication RequestAnother authentication Response