메인 항목으로

PlantUML

PlantUML 적용 테스트

사용법 : 코드블럭 작성시 plantuml을 입력후 해당 문법으로 작성합니다.

주의

  • 브라우저에서 WebAssembly 실행을 차단한 경우 특정 문법이 렌더링 되지 않습니다. Safari의 경우 file:// 에 대한 WebAssembly 실행이 기본적으로 차단되어있습니다.

  • #차단시 경고 문구
[PlantUML] 이 브라우저는 로컬 파일에서 WebAssembly를 차단하여 그래프 레이아웃 다이어그램을 렌더링할 수 없습니다

  • pdf 내보내기에서도 지원예정 입니다. 렌더링 엔진 별도 적용 작업 진행중. 기존 mermaid 문법과 동시 처리시 메모리 점유율 테스트 중.

예제

Port In/Out

@startuml
[c]
node node {
port p1
port p2
port p3
file f1
}
c --> p1
c --> p2
c --> p3
p1 --> f1
p2 --> f1
@enduml

Timing Diagram

@startuml
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
robust "Web Browser" as WB
concise "Web User" as WU
@0
WU is Idle
WB is Idle
@100
WU is Waiting
WB is Processing
@300
WB is Waiting
@enduml

mermaid 혼합시 렌더링 테스트

flowchart TD
    S["XPath 쿼리<br/>pre > code.language-mermaid"] --> LOOP

    subgraph LOOP ["foreach block"]
        direction TB
        L1["다이어그램 소스 추출<br/>html_entity_decode(textContent)"]
        L2["임시 .mmd 파일 생성<br/>/tmp/mmd_in_xxx.mmd"]
        L3["mmdc 실행<br/>node cli.js -i input -o output.png -s 2"]
        L4["@unlink 입력 파일"]
        L5{"성공?<br/>exitCode===0<br/>filesize > 0"}
        L6["DOM에 img 삽입<br/>src=file:///tmp/xxx.png"]
        L7["mermaidTempFiles에<br/>경로 추가"]
        L8["@unlink 출력 파일"]

        L1 --> L2 --> L3 --> L4 --> L5
        L5 -- "성공" --> L6 --> L7
        L5 -- "실패" --> L8
    end

    style L3 fill:#f4845f,color:#fff
    style L6 fill:#5bc0de,color:#fff

Smoke test

   @startuml
   Alice -> Bob : [[javascript:alert(1) 클릭금지]]
   @enduml

변형 문법 테스트

@startsalt
skinparam dpi 200
{
<&person> Login | "MyName "
<&key> Password | "**** "
[<&circle-x> Cancel ] | [ <&account-login> OK ]
}
@endsalt
댓글 없음
맨 위로