그래프를 그리는 언어
사용처
grafana 의 diagram 플러그인에서 사용
예제
https://community.home-assistant.io/t/100956
https://grafana.com/grafana/plugins/jdbranham-diagram-panel
기본 문법
https://mermaid-js.github.io/mermaid/#/flowchart
디버깅
라이브 테스트 웹사이트에서 테스트 후 적용
https://mermaid-js.github.io/mermaid-live-editor/
%% 그래프 진행방향 Left -> Right graph LR; %% 노드 선언 ochang_router((오창R)) daejeon_router((대전R)) seoul_router((서울R)) pusan_router((부산R)) sejong_router((세종R)) ulsan_router((울산R)) pohang_router((포항R)) %% ohang_kma["기상<br>슈퍼컴"] pusan_apcc("APCC") pusan_pnu("부산대") pusan_pknu("부경대") seoul_yonsei("연세대") gongju_univ("공주대") ulsan_unist("UNIST") pohang_postech("POSTECH") %% 클래스 적용 class ochang_router router class daejeon_router router class seoul_router router class pusan_router router class sejong_router router class ulsan_router router class pohang_router router %% class ohang_kma ps class pusan_apcc ps class pusan_pnu ps class pusan_pknu ps class seoul_yonsei ps class gongju_univ ps class ulsan_unist ps class pohang_postech ps %% 클래스 선언 %% 모양, 색, 테두리 등 설정 classDef router fill:#CCF1FF,stroke:#333,stroke-width:2px; classDef ps fill:#E0D7FF,stroke:#333,stroke-width:2px; %% 노드 연결 ohang_kma -- 10G--- ochang_router %% ochang_router --- daejeon_router daejeon_router --- seoul_router daejeon_router --- pusan_router daejeon_router --- sejong_router daejeon_router --- ulsan_router daejeon_router --- pohang_router %% pusan_router -- 1G --- pusan_apcc pusan_router -- 1G --- pusan_pnu pusan_router -- 1G --- pusan_pknu seoul_router -- 1G --- seoul_yonsei sejong_router -- 1G --- gongju_univ ulsan_router -- 1G --- ulsan_unist pohang_router -- 1G --- pohang_postech |