그래프를 그리는 언어
사용처
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
