Asciidoctor Maven Pluginを使って良い感じにPlantUML図をHTMLファイルに埋め込む

この記事のゴール

・Asciidoctor Maven Pluginを使って良い感じにPlantUML図をHTMLファイルに埋め込む。

---

作業の流れ

1. プロジェクトフォルダ作成（所要時間：10秒）
2. pom.xmlの設定（所要時間：30秒）
3. adoc形式ファイル作成（所要時間：30秒）
4. ビルド【adoc形式ファイル → HTMLファイルに変換】（所要時間：30秒）

---

作業1：プロジェクトフォルダ作成

・フォルダ「asciidoc-practice」作成

---

作業2：pom.xmlの設定

・asciidoc-practiceフォルダ配下にpom.xml作成
・下記をpom.xmlにコピペ

<project xmlns="http://maven.apache.org/POM/4.0.0"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.asciidoc.practice</groupId>
  <artifactId>asciidoc-practice</artifactId>
  <packaging>jar</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>asciidoc-practice</name>
  <url>http://maven.apache.org</url>

  <build>
    <plugins>
      <plugin>
        <groupId>org.asciidoctor</groupId>
        <artifactId>asciidoctor-maven-plugin</artifactId>
        <version>2.1.0</version>
        <!-- process-asciidocゴールはどのフェーズにも紐づいてないので、
            generate-resourcesフェーズに紐づけて、ビルド時にこのフェーズを指定して実行する -->
        <executions>
          <execution>
            <id>asciidoc-to-html</id>
            <phase>generate-resources</phase>
            <goals>
              <goal>process-asciidoc</goal>
            </goals>
          </execution>
        </executions>

        <!-- PlantUML図をadoc形式ファイル内に埋め込むための依存追加 -->
        <dependencies>
          <dependency>
            <groupId>org.asciidoctor</groupId>
            <artifactId>asciidoctorj-diagram</artifactId>
            <version>2.1.2</version>
          </dependency>
        </dependencies>

        <configuration>
          <!-- PlantUMLのやつ -->
          <requires>
            <require>asciidoctor-diagram</require>
          </requires>
        </configuration>

      </plugin>
    </plugins>
  </build>
</project>

---

作業3：adoc形式ファイル作成

・下記フォルダ構成でindex.adocを作成する

　asciidoc-practice/src/docs/asciidoc/index.adoc

・index.adocに下記をコピペする（私が個人学習用に作成したやつ）

[plantuml]
----

left to right direction
skinparam linetype ortho

actor User

rectangle AWS {

    rectangle Amplify {
        [Frontend] as front
    }

    rectangle VPC1 {
        rectangle ECS {
            [Backend] as back
        }
    }

    rectangle VPC2 {
        database RDS as db {

        }
        [踏み台] as js
    }

}

actor Developer

User --> front : HTTPS
User --> back : HTTPS
back --> db : JDBC
Developer --> js : SSH PortForward

----

---

作業4：ビルド(adoc形式ファイル → HTMLファイルに変換)

・asciidoc-practice配下で下記コマンド実行

mvn generate-resources

・asciidoc-practice/target/generated-docs配下に「index.html」が作成されていることを確認
・下記のような図が表示されていることを確認

---

参考