Asciidoctor Maven Plugin을 사용하여 좋은 느낌으로 PlantUML 다이어그램을 HTML 파일에 포함

이 기사의 목표

· Asciidoctor Maven Plugin을 사용하여 좋은 느낌으로 PlantUML 다이어그램을 HTML 파일에 포함시킵니다.

작업 흐름

프로젝트 폴더 생성(소요 시간: 10초)

pom.xml 설정 (소요 시간 : 30 초)

adoc 형식 파일 작성(소요 시간:30초)

빌드【adoc 형식 파일 → HTML 파일로 변환】(소요 시간:30초)

작업 1: 프로젝트 폴더 만들기

· 폴더 "asciidoc-practice"작성

작업 2: pom.xml 설정

· asciidoc-practice 폴더 아래에 pom.xml 작성
· 아래를 pom.xml에 copipe

<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"이 생성되었는지 확인
・아래와 같은 그림이 표시되는 것을 확인

참고