Plantuml을 VSCode에서 사용

PlantUML

공식 사이트

PlantUML

(어째서 이렇게 광고 많을 것이다 이 사이트…)

장식 기법

htps : // p ぁつ ml. 코 m / 그럼 / c Reo

다음과 같은 코드를 구문 분석하여 UML을 그릴 수 있습니다.

샘플 코드

sample.puml

@startuml sample

skinparam shadowing false
autonumber

participant "い" as a
participant "ろ" as b
participant "は" as c
participant "に" as d

a -> b : 同期
activate a
    activate b
        b-->c : 非同期
        activate c
            b->b : **太字**
            activate b
                loop ループ
                    c->c: __下線__
                end

                ref over c: リファレンス\n（更に詳しい情報は XXX を参照等）

                alt IF 分岐
                    c->c: 処理
                    else 別の条件
                    c->c: 処理
                end

                c-->b : 非同期処理の\n完了
            deactivate b
        deactivate c
    b->a : 処理完了
    deactivate b
    create d
    a->d : 作成
a->a: 完了処理
deactivate a

note over a: Note A
note left b: Note B
note right c: Note C

@enduml

그리기

VSCode에서 puml 확장자로 UML을 작성할 수 있도록 허용

1. 확장 기능 설치

VSCode 열기 クイックオープン 열기 (windows의 경우 Ctrl + p)

ext install plantuml를 입력하고 Enter

왼쪽 창에 확장 프로그램 목록이 표시되므로 PlantUML 설치

2. Graphviz 설치

PlantUML 확장 기능을 활용하기 위해 Graphviz 설치

Graphviz - Graph Visualization Software

Windows의 경우 Windows> Stable 2.38 windows install packages로 이동

graphviz-2.38.msi 다운로드 및 실행

환경 변수에 Graphviz PATH 지정

C:\Program Files (x86)\Graphviz2.38\bin

VSCode Markdown으로 작성 가능

VSCode의 일반 Markdown 미리보기는 PlantUML을 배포하지 않으므로 확장 프로그램 설치

VSCode 열기 クイックオープン 열기 (windows의 경우 Ctrl + p)

ext install markdown-preview-enhanced를 입력하고 Enter

왼쪽 창에 확장 프로그램 목록이 표시되므로 Markdown Preview Enhanced 설치
(현재 2종류 있는 것 같다, 제작자는 Yiyi Wang의 것을 선택한다)

TIPS

Pandoc을 설치하면 Docx에 내보내기 → GoogleDoc에서 공유 할 수 있습니다 (GitHub를 사용하면 더 간단하지만 ...

See. VSCode에서 Markdown과 Plantuml을 사용하여 Docx 내보내기

markdown을 작성하고 미리 볼 때 Ctrl + k 다음 v를 누릅니다

.

외부 puml 파일을 @import 키워드로 Markdown 문에로드 할 수 있습니다

test.md

* こんな感じで↓

＠import "puml/seq.puml"

* 文章がスッキリする。
* ＠は半角で書くこと。

Markdown All in One을 사용하는 경우의 주의점

Markdown Preview Enhanced 미리보기 바로 가기를 덮어 쓰므로 바로 가기 키 편집

ctrl + shift + p에서 명령 팔레트 열기

shortcut를 입력하고 基本設定: キーボードショートカットを開く 선택

markdown.extension.togglePreviewToSide를 마우스 오른쪽 단추로 클릭하고 키 바인딩 삭제

PDF 내보내기를 원하는 경우

Markdown Preview Enhanced에서 PDF 내보내기가 어려우므로 다른 확장 프로그램 설치

ext install markdown-pdf에서 Markdown PDF 확장 프로그램 설치

ext install plantuml에서 PlantUML 확장 프로그램 설치

(현재) 디폴트라고 에러가 나오므로 공식 서버로부터 plantuml.jar를 DL한다

> setting에서 기본 설정 열기

plantuml.jar 값으로 DL plantuml.jar 설정

주의점

@import를 사용할 수 없으므로 PDF로 내보낼 때 puml 파일을 SVG 내보내고 붙여 넣습니다.

이런 느낌으로 → ![サンプル](out/sample/sample.svg)

Markdown과 함께 쓰고 나중에 나눌 수 있습니다.

설정에서 plantuml.server에 공식 https://www.plantuml.com/plantuml를 설정하면 기본 Markdown 미리보기에서도 그릴 수 있습니다

공식이라고는 해도 외부 서버이므로 주의가 필요

Docker를 사용하여 로컬로 서버를 만들 수도 있습니다

See. htps : // 후 b. 도 c r. 이 m/r/pㅁㅁㅇㅇㅇ/pㄱㄱㄱㄴㄴ