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


    참고

    좋은 웹페이지 즐겨찾기