Test QuickGV: Difference between revisions

From Fundamental Ramen
Jump to navigation Jump to search
 
(116 intermediate revisions by the same user not shown)
Line 1: Line 1:
See: https://graphviz.gitlab.io/_pages/pdf/dotguide.pdf
See: https://graphviz.gitlab.io/_pages/pdf/dotguide.pdf


= 建議線路 gen1 =
= Colored Edge =
<quickgv name="topology" theme="warm">
subgraph cluster_clinic {
  label="診間網路";


  his[label="HIS Server"];
<quickmmd name="colored-edge">
  nas[label="NAS"];
flowchart TD
  opd[label="診間"];
   A1(["👩🏻‍💻 Human"])
  pt[label="復健"];
   A2(["🤖 Agent"])
  reg[label="掛號"];
   tv[label="衛教"];
   prn[label="印表機"];
  sw[label="辦公室交換器"];
  fw[label="防火牆"];
  wan1[label="固定IP線路"];
  wan2[label="健保局 VPN"];
  cross[label="跨院病歷"];


   {opd pt reg tv his nas prn} -> sw;
   B1("HTTP<br>(Fiber v3)")
   sw -> fw;
 
   fw -> {wan1 wan2};
  subgraph backend handlers 
   wan1 -> cross [dir="back", color="#ff0000"];
    B2("API handler")
}
    B3("MCP HTTP")
    B4("Streamable Handler")
    B5("SSE handler")
    B6("MCP Server")
  end
 
  subgraph backend services
    C1(Mermaid to SVG)
    C2(Mermaid to PNG)
    C3(XML Formatter)
  end
 
  subgraph frontend
    B7("Nuxt.js")
  end
 
  subgraph resources
    D1(Mermaid Container<br>yuzutech/kroki-mermaid)
  end
 
  %% human path
  A1 --> B1
   B1 --> |the rest URI| B7
   linkStyle 0,1 stroke:#0000ff,stroke-width:2px
 
  %% agent path
  A2 --> B1
   B1 --> |/mcp or /sse| B3
  linkStyle 2,3 stroke:#00aa00,stroke-width:2px
 
  %% api path
  B7 --> |axios| B1
  B1 --> |/api| B2
  linkStyle 4,5 stroke:#9900cc,stroke-width:2px


// 開放網路
  B3 --> |/mcp| B4
subgraph cluster_open {
  B3 --> |/sse| B5
   label="開放網路";
  B4 & B5 --> B6
  B6 --> C1 & C2 & C3
   B2 --> D1
  C1 & C2 --> D1
</quickmmd>


  gu[label="新光保全"];
= Dish =
   mo[label="監視系統"];
<quickmmd name="dish">
  pc1[label="外網專用PC"];
mindmap
  rt[label="IP分享器"];
   A[Dish]
  wan3[label="浮動IP線路"];
    B1[Sauce Dish]
  mobile[label="監視系統 App"];
    B2[Shark's Fin Soup Dish]
    B3[Divided Dish]
    B4[Cassesrole Dish]
</quickmmd>


  {pc1 gu mo} -> rt -> wan3;
= MMD =
  wan3 -> mobile [label="tcp:3880", dir="back", color="#ff0000"];
}
</quickgv>


= 建議線路 gen2 =
<quickmmd name="testmmd">
flowchart LR
    Root("規則動詞變化<br>(play)")


<quickgv name="topology_gen2" theme="warm">
    Root --> Past("過去")
subgraph cluster_clinic {
    Root --> Pres("現在")
  label="診間網路";
    Root --> Fut("未來")


  his[label="HIS Server"];
    Past --> P1("過去普通: played")
  nas[label="NAS"];
    Past --> P2("過去進行: was/were playing")
  opd[label="診間"];
    Past --> P3("過去完成: had played")
  pt[label="復健"];
    Past --> P4("過去被動: was/were played")
  reg[label="掛號"];
  tv[label="衛教"];
  prn[label="印表機"];
  vlan1[label="診間區虛擬網路"];
  vlan2[label="敏感區虛擬網路"];
  fw[label="防火牆"];
  wan1[label="固定IP線路"];
  wan2[label="健保局 VPN"];
  cross[label="跨院病歷"];


  {opd pt reg tv prn} -> vlan1;
    Pres --> R1("現在普通: play / plays")
  {his nas} -> vlan2;
    Pres --> R2("現在進行: am/is/are playing")
  {vlan1 vlan2} -> fw;
    Pres --> R3("現在完成: have/has played")
  fw -> {wan1 wan2};
    Pres --> R4("現在被動: am/is/are played")
  wan1 -> cross [dir="back", color="#ff0000"];
}


// 開放網路
    Fut --> F1("未來普通: will play")
subgraph cluster_open {
    Fut --> F2("未來進行: will be playing")
  label="開放網路";
    Fut --> F3("未來完成: will have played")
    Fut --> F4("未來被動: will be played")
</quickmmd>


  gu[label="新光保全"];
= WebSocket Service =
  mo[label="監視系統"];
  pc1[label="外網專用PC"];
  rt[label="IP分享器"];
  wan3[label="浮動IP線路"];
  mobile[label="監視系統 App"];


   {pc1 gu mo} -> rt -> wan3;
<quickgv name="123" theme="warm" usage="ram">
   wan3 -> mobile [label="tcp:3880", dir="back", color="#ff0000"];
subgraph cluster_client {
  label="WebSocket Client"
  c1[label="var ws = new WebSocket('/foo')"];
   c2[label="ws.onerror = function (ev) ..."];
   c3[label="ws.onopen = function (ev) ..."];
  c4[label="ws.onmessage = function (ev) ..."];
  c5[label="ws.send()"];
}
}
</quickgv>


= A =
subgraph cluster_server {
<quickgv name="Gff" theme="warm">
  label="";
rankdir=TB;
  s[label="Service Unit | <rh> Request Handler | <ph> Push Handler | <pw> Push Worker | <mh> Message Handler | <mw> Message Worker"];
 
  iq[label="Inbound Queue"];
A [label="驗證銷售權"];
  oq[label="Outbound Queue"];
B [label="驗證輸入值格式"];
}
C [label="驗證報價是否存在"];
D [label="產生 GDS 訂單"];
E [label="產生供應商訂單"];


A -> B -> C -> D -> E;
c1 -> s:rh [color="#ff0000"];
c2 -> s:rh [color="#0000ff",dir="back"];
c3 -> s:rh [color="#0000ff",dir="back"];
c4 -> s:ph [color="#0000ff",dir="back"];
s:ph -> oq [color="#0000ff",dir="back"];
s:pw -> oq [color="#0000ff"];
c5 -> s:mh [color="#ff0000"];
s:mh -> iq [color="#ff0000"];
s:mw -> iq [color="#ff0000",dir="back"];
</quickgv>
</quickgv>



Latest revision as of 10:42, 10 September 2026

See: https://graphviz.gitlab.io/_pages/pdf/dotguide.pdf

Colored Edge

Dish

MMD

WebSocket Service

testflow

test

Crawling Flow

GDS

Geomancer

Sandbox