|
|
| Line 1: |
Line 1: |
| Test 1 - Mermaid Block Diagram:
| |
|
| |
| <kroki lang="mermaid">
| |
| block-beta
| |
| columns 3
| |
|
| |
| block:network:1
| |
| NET["Network\nSIP/RTP/WebRTC"]
| |
| end
| |
|
| |
| space
| |
| space
| |
|
| |
| block:sensor:1
| |
| SENS["Sensor\nPacket Capture"]
| |
| end
| |
|
| |
| space
| |
| space
| |
|
| |
| block:storage:2
| |
| DB[("MySQL\nCDR")]
| |
| PCAP[["PCAP\nRecordings"]]
| |
| end
| |
|
| |
| block:gui:1
| |
| GUI["Web GUI\nAnalysis"]
| |
| end
| |
|
| |
| NET --> SENS
| |
| SENS --> DB
| |
| SENS --> PCAP
| |
| GUI --> DB
| |
| GUI --> PCAP
| |
| </kroki>
| |
|
| |
| Test 2 - Mermaid Flowchart TB:
| |
|
| |
| <kroki lang="mermaid">
| |
| flowchart TB
| |
| subgraph NET[Network]
| |
| SIP[SIP Signaling]
| |
| RTP[RTP Media]
| |
| end
| |
|
| |
| subgraph SENSOR[Sensor]
| |
| CAP[Packet Capture]
| |
| QA[Quality Analysis]
| |
| end
| |
|
| |
| subgraph STORAGE[Storage]
| |
| DB[(MySQL/MariaDB)]
| |
| PCAP[(PCAP Files)]
| |
| end
| |
|
| |
| subgraph GUI[Web GUI]
| |
| WEB[Web Interface]
| |
| REP[Reports]
| |
| end
| |
|
| |
| NET --> SENSOR
| |
| SENSOR --> |CDR| DB
| |
| SENSOR --> |packets| PCAP
| |
| GUI --> |query| DB
| |
| GUI --> |playback| PCAP
| |
|
| |
| style NET fill:#e0f4fc,stroke:#00A7E3
| |
| style SENSOR fill:#e0f4fc,stroke:#00A7E3
| |
| style STORAGE fill:#fef3e2,stroke:#f78d1d
| |
| style GUI fill:#e0f4fc,stroke:#00A7E3
| |
| </kroki>
| |
|
| |
| Test 3 - BlockDiag:
| |
|
| |
| <kroki lang="blockdiag"> | | <kroki lang="blockdiag"> |
| blockdiag { | | blockdiag { |
| orientation = portrait; | | orientation = portrait; |
| | node_width = 200; |
| | node_height = 60; |
| | default_fontsize = 14; |
|
| |
|
| Network [label = "Network\nSIP/RTP"]; | | Network [label = "Network\nSIP / RTP / WebRTC", shape = cloud, color = "#ffffff", style = dashed, linecolor = "#00719A"]; |
| Sensor [label = "Sensor\nCapture & Analysis"]; | | Sensor [label = "Sensor\nPacket Capture & Analysis", color = "#ffffff", linecolor = "#00A7E3"]; |
| MySQL [label = "MySQL\nCDR Storage"]; | | MySQL [label = "MySQL/MariaDB\nCDR Storage", color = "#ffffff", linecolor = "#f78d1d"]; |
| PCAP [label = "PCAP\nRecordings"]; | | PCAP [label = "PCAP\nRecordings", color = "#ffffff", linecolor = "#f78d1d"]; |
| GUI [label = "Web GUI\nAnalysis"]; | | GUI [label = "Web GUI\nAnalysis & Reports", color = "#ffffff", linecolor = "#00A7E3"]; |
| | |
| Network -> Sensor -> MySQL;
| |
| Sensor -> PCAP;
| |
| GUI -> MySQL;
| |
| GUI -> PCAP;
| |
| | |
| group {
| |
| color = "#e0f4fc";
| |
| Network; Sensor;
| |
| }
| |
| | |
| group {
| |
| color = "#fef3e2";
| |
| MySQL; PCAP;
| |
| }
| |
| }
| |
| </kroki>
| |
| | |
| Test 4 - D2:
| |
|
| |
|
| <kroki lang="d2">
| | Network -> Sensor [label = "capture"]; |
| direction: down
| | Sensor -> MySQL [label = "CDR"]; |
| | | Sensor -> PCAP [label = "packets"]; |
| Network: Network Traffic {
| | GUI -> MySQL [label = "query"]; |
| style.fill: "#e0f4fc" | | GUI -> PCAP [label = "playback"]; |
| style.stroke: "#00A7E3" | |
| SIP | |
| RTP | |
| } | | } |
|
| |
| Sensor: Sensor {
| |
| style.fill: "#e0f4fc"
| |
| style.stroke: "#00A7E3"
| |
| Capture
| |
| Analysis
| |
| }
| |
|
| |
| Storage: Storage {
| |
| style.fill: "#fef3e2"
| |
| style.stroke: "#f78d1d"
| |
| MySQL: MySQL/MariaDB
| |
| PCAP: PCAP Files
| |
| }
| |
|
| |
| GUI: Web GUI {
| |
| style.fill: "#e0f4fc"
| |
| style.stroke: "#00A7E3"
| |
| }
| |
|
| |
| Network -> Sensor: capture
| |
| Sensor -> Storage.MySQL: CDR
| |
| Sensor -> Storage.PCAP: packets
| |
| GUI -> Storage.MySQL: query
| |
| GUI -> Storage.PCAP: playback
| |
| </kroki> | | </kroki> |
