Viz.js (Graphviz)

Viz.js Graphviz की शक्ति को Moraya में लाता है, जिससे आप DOT भाषा ग्राफ़ विवरणों को सीधे Markdown कोड ब्लॉक में रेंडर कर सकते हैं। Graphviz एब्स्ट्रैक्ट ग्राफ़ और नेटवर्क के डायग्राम के रूप में स्ट्रक्चरल जानकारी को विज़ुअलाइज़ करने के लिए इंडस्ट्री-स्टैंडर्ड टूल है — सरल फ़्लोचार्ट से लेकर जटिल डिपेंडेंसी ट्री और स्टेट मशीन तक।

कोड ब्लॉक लैंग्वेज

लैंग्वेज टैग के रूप में dot या graphviz का उपयोग करें:

```dot
digraph { Start -> Process -> End }
```

```graphviz
graph { Server -- Client -- Database }
```

दोनों एक ही परिणाम देते हैं — dot और graphviz विनिमेय हैं।

बेसिक सिंटैक्स

डायरेक्टेड ग्राफ़ (digraph)

डायरेक्टेड ग्राफ़ नोड्स को जोड़ने के लिए एरो (->) का उपयोग करता है। यह उदाहरण एक सरल बिल्ड पाइपलाइन दर्शाता है:

```dot
digraph pipeline {
    rankdir=LR
    Code -> Build -> Test -> Deploy
}
```

अनडायरेक्टेड ग्राफ़ (graph)

अनडायरेक्टेड ग्राफ़ नोड्स को जोड़ने के लिए लाइन (--) का उपयोग करता है। यह उदाहरण एक पीयर-टू-पीयर नेटवर्क दर्शाता है:

```dot
graph network {
    layout=neato
    overlap=false
    Alice -- Bob
    Alice -- Carol
    Bob -- Dave
    Carol -- Dave
    Dave -- Eve
}
```

एट्रिब्यूट

एट्रिब्यूट ग्राफ़, नोड्स और एज की दिखावट को कस्टमाइज़ करते हैं:

```dot
digraph styled {
    rankdir=LR
    node [shape=box, style=filled, fillcolor="#E3F2FD"]
    edge [color="#1565C0"]
    Input [shape=parallelogram, fillcolor="#C8E6C9"]
    Output [shape=parallelogram, fillcolor="#FFCDD2"]
    Input -> Process -> Decision
    Decision -> Output [label="yes"]
    Decision -> Process [label="retry", style=dashed]
}
```

लेआउट इंजन

layout ग्राफ़ एट्रिब्यूट के साथ लेआउट इंजन निर्दिष्ट करें:

उपयोग: graph [layout=neato]

नोड शेप

Graphviz में उपलब्ध सामान्य नोड शेप:

एज स्टाइल

उदाहरण

सरल डायरेक्टेड ग्राफ़

बिल्ड स्टेप्स के बीच संबंध दिखाने वाला एक बुनियादी डिपेंडेंसी ग्राफ़।

```dot
digraph build_pipeline {
    rankdir=LR
    node [shape=box, style=filled, fillcolor="#f0f0f0"]

    Source -> Compile
    Compile -> Link
    Link -> Test
    Test -> Deploy
}
```

शेप और रंगों के साथ फ़्लोचार्ट

एक्शन और निर्णय को अलग करने के लिए विभिन्न नोड शेप का उपयोग करने वाला एक डिसीज़न फ़्लोचार्ट।

```dot
digraph flowchart {
    node [fontname="Helvetica"]

    start [shape=ellipse, style=filled, fillcolor="#4CAF50", fontcolor=white, label="Start"]
    input [shape=parallelogram, style=filled, fillcolor="#E3F2FD", label="Read Input"]
    check [shape=diamond, style=filled, fillcolor="#FFF9C4", label="Valid?"]
    process [shape=box, style=filled, fillcolor="#E3F2FD", label="Process Data"]
    error [shape=box, style=filled, fillcolor="#FFCDD2", label="Show Error"]
    output [shape=parallelogram, style=filled, fillcolor="#E3F2FD", label="Write Output"]
    end [shape=ellipse, style=filled, fillcolor="#F44336", fontcolor=white, label="End"]

    start -> input
    input -> check
    check -> process [label="Yes"]
    check -> error [label="No"]
    error -> input
    process -> output
    output -> end
}
```

क्लास हायरार्की (इनहेरिटेंस ट्री)

इनहेरिटेंस संबंधों को दिखाने वाला एक ऑब्जेक्ट-ओरिएंटेड क्लास हायरार्की।

```dot
digraph class_hierarchy {
    rankdir=BT
    node [shape=record, style=filled, fillcolor="#FFFDE7"]

    Animal [label="{Animal|+ name: String\l+ age: Int\l|+ speak(): String\l+ move(): void\l}"]
    Dog [label="{Dog|+ breed: String\l|+ fetch(): void\l}"]
    Cat [label="{Cat|+ indoor: Bool\l|+ purr(): void\l}"]
    Bird [label="{Bird|+ wingspan: Float\l|+ fly(): void\l}"]
    GoldenRetriever [label="{GoldenRetriever|+ trained: Bool\l}"]
    Parrot [label="{Parrot|+ vocabulary: Int\l|+ mimic(): void\l}"]

    Dog -> Animal [arrowhead=empty]
    Cat -> Animal [arrowhead=empty]
    Bird -> Animal [arrowhead=empty]
    GoldenRetriever -> Dog [arrowhead=empty]
    Parrot -> Bird [arrowhead=empty]
}
```

स्टेट मशीन

एक सरल TCP कनेक्शन जीवन चक्र के लिए फ़ाइनाइट स्टेट मशीन।

```dot
digraph tcp_states {
    rankdir=LR
    node [shape=circle, style=filled, fillcolor="#E8EAF6"]

    CLOSED [shape=doublecircle, fillcolor="#FFCDD2"]
    LISTEN [fillcolor="#C8E6C9"]
    SYN_SENT
    SYN_RCVD
    ESTABLISHED [shape=doublecircle, fillcolor="#C8E6C9"]
    FIN_WAIT_1
    FIN_WAIT_2
    CLOSE_WAIT
    TIME_WAIT

    CLOSED -> LISTEN [label="passive open"]
    CLOSED -> SYN_SENT [label="active open\n/ send SYN"]
    LISTEN -> SYN_RCVD [label="recv SYN\n/ send SYN+ACK"]
    SYN_SENT -> ESTABLISHED [label="recv SYN+ACK\n/ send ACK"]
    SYN_RCVD -> ESTABLISHED [label="recv ACK"]
    ESTABLISHED -> FIN_WAIT_1 [label="close\n/ send FIN"]
    ESTABLISHED -> CLOSE_WAIT [label="recv FIN\n/ send ACK"]
    FIN_WAIT_1 -> FIN_WAIT_2 [label="recv ACK"]
    FIN_WAIT_2 -> TIME_WAIT [label="recv FIN\n/ send ACK"]
    CLOSE_WAIT -> CLOSED [label="close\n/ send FIN"]
    TIME_WAIT -> CLOSED [label="timeout"]
}
```

नेटवर्क टोपोलॉजी

स्विच, राउटर और सर्वर के साथ एक डेटा सेंटर नेटवर्क टोपोलॉजी।

```dot
graph network {
    graph [layout=neato, overlap=false]
    node [fontname="Helvetica", fontsize=10]

    // Core router
    router [shape=diamond, style=filled, fillcolor="#FF9800", fontcolor=white, label="Core\nRouter"]

    // Distribution switches
    sw1 [shape=box, style=filled, fillcolor="#42A5F5", fontcolor=white, label="Switch 1"]
    sw2 [shape=box, style=filled, fillcolor="#42A5F5", fontcolor=white, label="Switch 2"]

    // Servers
    web1 [shape=box3d, style=filled, fillcolor="#E8F5E9", label="Web 1"]
    web2 [shape=box3d, style=filled, fillcolor="#E8F5E9", label="Web 2"]
    db1 [shape=cylinder, style=filled, fillcolor="#FFF3E0", label="DB Primary"]
    db2 [shape=cylinder, style=filled, fillcolor="#FFF3E0", label="DB Replica"]
    cache [shape=box3d, style=filled, fillcolor="#F3E5F5", label="Redis"]

    // Connections
    router -- sw1 [penwidth=2]
    router -- sw2 [penwidth=2]
    sw1 -- web1
    sw1 -- web2
    sw1 -- cache
    sw2 -- db1
    sw2 -- db2
    db1 -- db2 [style=dashed, label="replication"]
}
```

रिकॉर्ड-आधारित नोड्स (Struct)

डेटा स्ट्रक्चर और उनके फ़ील्ड लेआउट को विज़ुअलाइज़ करने के लिए रिकॉर्ड शेप का उपयोग।

```dot
digraph structs {
    node [shape=record, fontname="Courier", fontsize=10]

    linked_list [label="<head> head | {data: 10 | <next> next}"]
    node1 [label="{data: 20 | <next> next}"]
    node2 [label="{data: 30 | <next> next}"]
    null [shape=plaintext, label="NULL"]

    linked_list:next -> node1
    node1:next -> node2
    node2:next -> null

    // Binary tree
    root [label="<left> | 50 | <right>"]
    l1 [label="<left> | 30 | <right>"]
    r1 [label="<left> | 70 | <right>"]
    l2 [label="<left> | 20 | <right>"]
    l3 [label="<left> | 40 | <right>"]

    root:left -> l1
    root:right -> r1
    l1:left -> l2
    l1:right -> l3
}
```

सबग्राफ़ और क्लस्टर

क्लस्टर संबंधित नोड्स को एक दृश्य बॉउंड्री के साथ समूहित करते हैं।

```dot
digraph architecture {
    compound=true
    node [shape=box, style="filled,rounded", fontname="Helvetica"]

    subgraph cluster_frontend {
        label="Frontend"
        style=filled
        fillcolor="#E3F2FD"
        color="#1565C0"

        react [label="React App", fillcolor="#BBDEFB"]
        nginx [label="Nginx", fillcolor="#BBDEFB"]
    }

    subgraph cluster_backend {
        label="Backend"
        style=filled
        fillcolor="#E8F5E9"
        color="#2E7D32"

        api [label="API Server", fillcolor="#C8E6C9"]
        auth [label="Auth Service", fillcolor="#C8E6C9"]
        worker [label="Background Worker", fillcolor="#C8E6C9"]
    }

    subgraph cluster_data {
        label="Data Layer"
        style=filled
        fillcolor="#FFF3E0"
        color="#E65100"

        postgres [label="PostgreSQL", shape=cylinder, fillcolor="#FFE0B2"]
        redis [label="Redis", shape=cylinder, fillcolor="#FFE0B2"]
        s3 [label="S3 Storage", shape=folder, fillcolor="#FFE0B2"]
    }

    react -> nginx
    nginx -> api
    api -> auth
    api -> postgres
    api -> redis
    auth -> postgres
    worker -> redis
    worker -> s3
}
```

Git कमिट ग्राफ़

एक सरलीकृत Git ब्रांच और मर्ज इतिहास।

```dot
digraph git {
    rankdir=LR
    node [shape=circle, style=filled, width=0.3, fixedsize=true, fontsize=8]
    edge [arrowsize=0.6]

    // Main branch
    m1 [fillcolor="#4CAF50", label="m1"]
    m2 [fillcolor="#4CAF50", label="m2"]
    m3 [fillcolor="#4CAF50", label="m3"]
    m4 [fillcolor="#4CAF50", label="m4"]
    m5 [fillcolor="#4CAF50", label="m5"]

    m1 -> m2 -> m3 -> m4 -> m5

    // Feature branch
    f1 [fillcolor="#2196F3", label="f1"]
    f2 [fillcolor="#2196F3", label="f2"]
    f3 [fillcolor="#2196F3", label="f3"]

    m2 -> f1 -> f2 -> f3
    f3 -> m4 [style=dashed, label="merge"]

    // Hotfix branch
    h1 [fillcolor="#F44336", label="h1"]

    m3 -> h1
    h1 -> m5 [style=dashed, label="merge"]

    // Branch labels
    main [shape=box, style="filled,rounded", fillcolor="#C8E6C9", label="main"]
    feature [shape=box, style="filled,rounded", fillcolor="#BBDEFB", label="feature/login"]
    hotfix [shape=box, style="filled,rounded", fillcolor="#FFCDD2", label="hotfix/bug-fix"]

    m5 -> main [style=invis]
    f3 -> feature [style=invis]
    h1 -> hotfix [style=invis]

    { rank=same; m1 }
    { rank=same; m2; f1 }
    { rank=same; m3; f2; h1 }
    { rank=same; m4; f3 }
    { rank=same; m5; main; feature; hotfix }
}
```

सुझाव

• डिफ़ॉल्ट ऊपर-से-नीचे के बजाय बाएं-से-दाएं लेआउट के लिए rankdir=LR का उपयोग करें।
• रिकॉर्ड लेबल में लेफ़्ट-अलाइन्ड लाइन ब्रेक के लिए \n के बजाय \l का उपयोग करें।
• नोड्स के ओवरलैप को रोकने के लिए neato या fdp लेआउट के साथ overlap=false सेट करें।
• क्लस्टर के बीच एज की अनुमति देने के लिए compound=true का उपयोग करें।
• जब रिकॉर्ड शेप पर्याप्त लचीले न हों तो जटिल नोड कंटेंट के लिए HTML-जैसे लेबल (<TABLE>) का उपयोग करें।