Nodachisoft Nodachi Sword Icon
  
@あまじ✎ 2020年10月21日に更新

Gatsby に Graphviz を導入して静的に画像を生成する手順

当サイトは Gatsby でマークダウンを利用してブログを書いています。

開発関連の記事を書くときなど、図形を画像で載せたいなー、と思うことがよくありますが、できれば設計とかの説明画像を毎回、別ファイルで生成してマークダウンから参照させるのではなく、直接マークダウンの中に埋め込むように書きたい。

ということで、今回はGatsby で扱うマークダウンの中に、GraphViz のコードを埋め込みして、事前に画像(SVG ファイル言語)で出力してくれるプラグイン「gatsby-remark-graphviz」を導入した流れを記録しています。

できるようにする事

ブログ記事を書いているマークダウンに下のような GraphViz の図形生成のコード(dot言語のコード)を書いてあげることで、画像を生成して表示できるようにしたい。

 
dot言語で表す図形の例
```dot
digraph graph_name {
  map1, map2 [ style = "solid,filled" , shape = box]
  map1 [
    label = "はじまりの村", color = "#108860"
  ]
  map2 [
    label = "ゴブリンのダンジョン", color = "#997035"
  ]
  map1 -> map2[ label = "草原の道" ]
}
```

生成されるイメージこんな感じのものです。

dot言語(スタイル)とは

Graphviz が扱える幾つかの言語の一つ。 dot 言語では Directed Graph(有効グラフ)に向いた図形を生成できます。

図.ゲームマップ同士の関係性

graph_name map1 はじまりの村 map2 ゴブリンのダンジョン map1->map2 草原の道

はじまりの村からゴブリンのダンジョンにいけるよ。草原の道を通っていくよ。一方通行だよ。

みたいな感じで図を表せます。

実際にコードを書いた場所に、 以下のような HTML コード(SVG のデータ)がシンプルに追加されました。

追加されるHTML要素
<svg width="210pt" height="116pt" viewBox="0.00 0.00 210.50 116.00" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" style="max-width: 100%; height: auto;">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 112)">
<title>graph_name</title>
 : 中略(SVG の生データ)
</g>
</svg>

導入手順

前提

Gatsby にマークダウンプラグイン(gatsby-transformer-remark)を導入してページ生成していること。

インストール

公式に書いてある手順に従っていきます。 正確な情報は下記を見てくださいね。このページでは公式を参照しながら私が実施した手順などなどを書いてます。

参考:公式Gatsby - pakcages - gatsby-remark-graphviz

npm 経由で必要なパッケージをインストールしましょう。

 
インストールコマンド
> npm install --save gatsby-remark-graphviz

2020年7月24日時点で最新版を導入しましたが、viz.js@2.1.2 はもうサポートしてないバージョンだよ(npm WARN deprecated viz.js@2.1.2: no longer supported)と警告がでました。

特に問題なく動作するのでそのまま作業を進めます。

無事にパッケージが追加されたら使うための設定を書いていきましょー。

GraphViz本体のインストーラ

GraphViz 公式から単体で動くもののインストーラも出てますが、そちらは Gatsby 上で扱うだけならそちらはインストールする必要はありません。上記コマンドで依存関係パッケージとしてインストールされる viz.js という JavaScript で実装されたパッケージが使われるようです。

gatsby-config.js への設定追記

以下のように gatsby-remark-graphviz への参照を 記載してあげます。"gatsby-transformer-remark" プラグイン(マークダウンを扱うプラグイン)の options の plugins 配列の一つとして記載してください。

gatsby-remark-graphviz(抜粋)
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [  // このプラグインの一つとして記載
          :中略
        { // prismjs よりも上で設定する!          resolve: `gatsby-remark-autolink-headers`,          options: {            offsetY: `100`, // 横方向のオフセット位置(単位はピクセル)指定            icon: `<img src='xxxx.gif' />`, // SVG もOK            className: `urlhash-class`,     // 追加される Aタグのクラス名            maintainCase: true,   // 付与するURLフラグメントの英字を大文字に            removeAccents: true,  // 生成するHEADタグ内のIDからアクセント消去            isIconAfterHeader: true,  // icon を付与する            elements: [`h1`,`h2`],  // とのHEADERタグを対象にするか          }        },        {
        resolve: 'gatsby-remark-prismjs',
        options: {
          :以下略

ブログ内のコードブロックを扱うようなプラグイン(gatsby-remark-prismjs とか)を使っている方は、それらのプラグイン定義より前に定義を書いてあげる必要がありますので注意。

スタイル(CSS)の適用

何も指定しなければ下記のスタイルが適用されます。

デフォルトスタイル
max-width: 100%;
height: auto;

自分で幅とかのスタイルを適用する場合は以下のように style 指定を加えてあげます。

生成する画像SVGにスタイル適用
```dot style="max-width: 700px"
digraph graphname {
  a -> b;
  b -> c;
  a -> c;
}
```

上記では、「max-width: 700px」をスタイル指定しています。 あんまりにもでかい画像向けの設定とか。

図形参考

このプラグインは GraphViz で生成できる dot言語の他、circo 言語※にも対応しています。

circo

dot 言語は Directed Graph(有効グラフ)に向いた図形を生成できますが、circo 言語では circular layout of graphs(円形のレイアウトを使ったグラフ)に向いた図形を生成できるみたいです。

circo言語での生成例
```circo
digraph g1 {
    node [shape = circle , style = "solid,filled"];
    雷 [ color = "#FFEE00" ];
    炎 [ color = "#FF0000" ];
    水 [ color = "#66FFFF" ];
    水 -> 炎 [ label = "強"];
    炎 -> 雷 [ label = "強"];
    雷 -> 水 [ label = "強"]; 
}
```

下のような画像が生成できます!うーん、なんか楽しい。

図.ゲーム:魔法属性の強さ関係性

g1 雷->水 炎->雷 水->炎

あとがき

設計を載せたりしたい方には非常にありがたいプラグインですね。 なによりもサーバレンダリングで画像生成してくれるので閲覧時は非常に軽いのもすばらしい。

似たような設計関連の画像生成に役立つプラグインが公開されてますので、参考までに以下にリンクを貼っておきます。

この辺りは今後必要になったときに入れていきたいです。

プラグイン名 できること
gatsby-remark-plantuml プラグイン マークダウンの中で PlantUML を使ってシンプルなテキストから UML 図形を生成できる。
gatsby-remark-mermaid プラグイン マークダウンの中で Mermaid を使ったテキストから UML などの図形を生成できる。図形の見た目とかカスタマイズできて綺麗。

プラグイン作者さまに感謝です。

おしまい。

参考

変更履歴

  • 2020/10/21 cover&eyecatch画像作成
  • 2020/07/24 初版公開
 
 
送信しました!

コメント、ありがとうございます。

なんかエラーでした

ごめんなさい。エラーでうまく送信できませんでした。ご迷惑をおかけします。しばらくおいてから再度送信を試していただくか、以下から DM などでご連絡頂ければと思います。

Twitter:@NodachiSoft_jp
お名前:
 
連絡先:
 
メッセージ:
 
戻る
内容の確認!

以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください

お名前:
 
連絡先:
 
メッセージ:
 
Roboto からの操作ではないという確認のため確認キーを入れてください。
確認キー=95
戻る
 / 
送信確認へ
コメント欄
コメント送信確認へ

関連ありそうな記事(5件)です!

Gatsby でマークダウンの文章を手軽に装飾する(下線とかマーカーを引く、太字にするなど)

#Gatsby✎ 2021-01-30
Gatsby のマークダウンで手軽に装飾する方法を記載。下線を引く、マーカーを引く、太字にする、点線を引くなどを html タグを省略して文章の一部に適用する。
広告領域
追従 広告領域
目次
Gatsby に Graphviz を導入して静的に画像を生成する手順
Gatsby に Graphviz を導入して静的に画像を生成する手順
できるようにする事
できるようにする事
導入手順
導入手順
前提
前提
インストール
インストール
gatsby-config.js への設定追記
gatsby-config.js への設定追記
スタイル(CSS)の適用
スタイル(CSS)の適用
図形参考
図形参考
あとがき
あとがき
参考
参考
変更履歴
変更履歴
Nodachisoft © 2020