Zenn
🐢

D2 Diagram生成 & コンパイルフロー

2023/07/26に公開
Docker
個人開発
diagram
d2
tech

はじめに

個人開発の中でドキュメントをNotionなどで管理するのもアリだけどエンジニアならコードで管理！ということでDiagramの生成をD2で行ってみました。
ZennでもサポートGitHubでもサポートされているMermindも簡易的に書けて良いですが、対応してるDiagramとしては個人的にD2の方が良さそうでしたのでD2を採用しました。

※今回はD2単体での利用想定の実装になります

D2とは

シンプルにスクリプトからDiagramを画像で生成するツールになります。
※Exportの形式はいくつか存在します

https://d2lang.com/

とりあえず試してみる

  1. インストール
# インストール時に何が行われるか確認するコマンド
curl -fsSL https://d2lang.com/install.sh | sh -s -- --dry-run
# 実際にインストールするコマンド
curl -fsSL https://d2lang.com/install.sh | sh -s --
  1. d2ファイル作成
input.d2
x -> y
  1. Diagram生成
# d2コマンドを使用して(2)で作成したinput.d2よりSVGファイル(output.svg)を生成
d2 input.d2 output.svg
  1. 生成した画像
    これだけ。あとはスクリプトの書き方を学べばちょろっと使えるようになります。
    output.svg

Myビルド環境

D2なんてあまり使わないよなぁ。ローカルに入れたくないよなぁ。ということでDocker環境でビルド環境を構築しました。(イメージサイズは200MB)

  1. ディレクトリ構成
    baseディレクトリ内のd2ファイルを探索して、distディレクトリにエクスポートする構成です。
    BindMountを利用してDockerコンテナ上でコンパイルを実行します。
documents/
  - d2/
    - base/
      xxx.d2(D2ファイルを配置)
    - dist/
      xxx.svg(生成された画像を配置)
  - scripts/
    - d2_compile.sh
    - docker_run_compile.sh
    - ...(スクリプトを配置)
  - .gitignore
  - .dockerignore
  - Dockerfile
  - Makefile
  1. Dockerfile
    かなりシンプルな構成でubuntuをベースに必要になるcurlとmakeをインストールしています。そして今回メインのd2をインストールします。
Dockerfile
FROM ubuntu:22.10

RUN apt-get update && \
    apt-get install -y \
    curl \
    make && \
    apt-get clean && \
    rm -rf /var/lib/apt/lists/*

# https://d2lang.com/tour/install/
RUN curl -fsSL https://d2lang.com/install.sh | sh -s --

WORKDIR /app
  1. ビルドスクリプト
    以下のスクリプトを実行してd2/baseディレクトリ内の*.d2ファイルを対象にsvg形式でエクスポートします。d2コマンドに一括指定のようなオプションはなかったと思うのでスクリプト組んで対応しました。(生成済みのものも対象に一括でエクスポートしています)
    また、ダークテーマもあるのでどちらの形式もエクスポートするようにしております。
d2_compile.sh
#!/usr/bin/env bash

CURRENT_DIR=$(pwd)
TARGET_DIR=$CURRENT_DIR/"d2/base"
EXPORT_DIR=$CURRENT_DIR/"d2/dist"
TARGET_FILES=$TARGET_DIR/*.d2

for FILE in $TARGET_FILES; do
    # Generate export filename
    FILE_NAME=$(basename "$FILE")
    FILE_NAME_WITHOUT_EXT="${FILE_NAME%.*}"
    EXPORT_FILE_LIGHT=$EXPORT_DIR/${FILE_NAME_WITHOUT_EXT}Light.svg
    EXPORT_FILE_DARK=$EXPORT_DIR/${FILE_NAME_WITHOUT_EXT}Dark.svg

    # Log
    echo "[$FILE] -> [${EXPORT_FILE_LIGHT}, ${EXPORT_FILE_DARK}]"

    # Compile
    # Docker image not supported [.png, pdf]
    d2 $FILE $EXPORT_FILE_LIGHT
    d2 --dark-theme 200 $FILE $EXPORT_FILE_DARK
done
  1. コンテナ内で実行するのめんどくさいのでMakeでタスク登録
    以下の設定によりユーザ(開発者・自分)がd2ファイルを生成した後にコンパイルしたい場合は以下のコマンドを実行するのみになります。
# D2コンパイル(distに生成)
# ※事前にイメージビルドしておく
make
docker_run_compile.sh
#!/usr/bin/env bash
# コンテナ起動時にシェルを実行するようにしております
IMAGE_NAME="d2"
BIND_DIR=$(pwd)
SCRIPT_FILE="scripts/d2_compile.sh"

docker run --rm -it -v $BIND_DIR:/app $IMAGE_NAME sh $SCRIPT_FILE
Makefile
# 最近Makeをタスクランナーとして使用することにハマっているので以下のように定義しております
SHELL := /bin/bash

c:
    sh ./scripts/docker_run_compile.sh
b:
    sh ./scripts/docker_build.sh

さいごに

Diagramの生成のみなのでドキュメント化はまた別のサービスを使用して生成しようと思います。
MermaidもMarkdownで書けて便利なので少しは使えるようにしておきたい。Notionでもちょろっと組めたりする。
https://mermaid.js.org/

Discussion