visual-data/examples.md

Примеры диаграмм для визуального сравнения

D2 — Блок-схема процесса

# workflow.d2
{
  edgeStyle: round
  Start: { shape: circle }
  
  Start -> Briefing
  Briefing -> Audit
  Audit -> Question
  
  Question -> Create: Да
  Question -> Clarify: Нет
  
  Create -> Approval
  Clarify -> Approval: возврат
  
  Approval -> End
  End: { shape: circle }
}

---

Mermaid — Sequence Diagram

sequenceDiagram
    participant Client
    participant API
    participant DB
    
    Client->>API: POST /process
    API->>DB: save data
    DB-->>API: ok
    API->>Client: 200 OK

---

Mermaid — Flowchart

flowchart TD
    A[Старт] --> B[Брифинг клиента]
    B --> C[Аудит процессов]
    C --> D{Процессы<br/>прозрачны?}
    D -->|Да| E[Создание<br/>DRAKON-схем]
    D -->|Нет| F[Уточняем<br/>процесс]
    F -->|возврат| G[Согласование]
    E --> G
    G --> H[Готово]

---

markmap — Mindmap

# Визуализация данных
## Блок-схемы
### D2
- CLI-рендер
- Переменные
- Итерации
### Mermaid
- Markdown
- GitHub/GitLab
### SVG вручную
- Полный контроль
- Анимация
## Mindmaps
### markmap
- Markdown-вход
- Интерактивный
- VS Code
## Архитектура
### diagrams (Python)
- AWS/GCP
- Network
### Structurizr
- C4 model

---

PlantUML — Component Diagram

@startuml
component "API Server" as api
component "Database" as db
component "Cache" as cache

api --> db
api --> cache
@enduml

---

Graphviz — Network Diagram

digraph network {
  rankdir=LR
  node [shape=box, style=filled, fillcolor="#16162a", fontcolor=white]
  
  client [label="Client"]
  api [label="API Server"]
  db [label="Database"]
  cache [label="Redis Cache"]
  
  client -> api
  api -> db
  api -> cache
  cache -> db
}

---

D2 — Architecture Diagram

{
  edgeStyle: round
  
  User: { shape: person }
  
  User -> Web App
  User -> Mobile App
  
  Web App -> API
  Mobile App -> API
  
  API -> Auth Service
  API -> Data Service
  
  Data Service -> PostgreSQL
  Data Service -> Redis
  Data Service -> S3
}

---

D2 — DRAKON-подобная схема

{
  edgeStyle: round
  edgeStyle.curve: smooth
  
  {dir: down}
  Start -> Briefing
  Briefing -> Audit
  Audit -> Question
  Question -> Create
  Question -> Clarify
  Clarify -> Approval
  Create -> Approval
  Approval -> End
}

Start: {
  text: Старт
}

Briefing: {
  text: "Брифинг\nклиента"
}

Audit: {
  text: "Аудит\nпроцессов"
}

Question: {
  text: "Процессы\nпрозрачны?"
}

Create: {
  text: "Создание\nDRAKON-схем"
}

Clarify: {
  text: "Уточняем\nпроцесс"
}

Approval: {
  text: "Согласование"
}

End: {
  text: "Готово"
}

---

SVG — DRAKON-схема (встраиваемая)

См. dracon.html в проекте dracon-tldraw — полная DRAKON-схема с glow-эффектами и анимациями.

---

Python — Генерация из кода

D2 из Python

#!/usr/bin/env python3
"""Генерация блок-схемы из Python-конфига."""

import subprocess
import json

# Конфиг процесса
process = {
    "name": "ROI24 Onboarding",
    "steps": [
        {"id": "briefing", "label": "Брифинг клиента", "type": "process"},
        {"id": "audit", "label": "Аудит процессов", "type": "process"},
        {"id": "question", "label": "Процессы прозрачны?", "type": "decision"},
        {"id": "create", "label": "Создание схем", "type": "process"},
        {"id": "clarify", "label": "Уточняем процесс", "type": "process"},
        {"id": "approve", "label": "Согласование", "type": "process"},
        {"id": "end", "label": "Готово", "type": "end"},
    ],
    "decisions": {
        "question": [
            {"label": "Да", "target": "create"},
            {"label": "Нет", "target": "clarify"},
        ],
    },
}

# Генерация D2
def generate_d2(config):
    lines = ["{"]
    lines.append('  edgeStyle: round')
    
    for step in config["steps"]:
        node_id = step["id"]
        label = step["label"].replace('"', '\\"')
        lines.append(f'{node_id}: "{label}"')
    
    # Связи
    step_ids = [s["id"] for s in config["steps"]]
    for i in range(len(step_ids) - 1):
        src = step_ids[i]
        tgt = step_ids[i + 1]
        lines.append(f'{src} -> {tgt}')
    
    # Решения
    for decision_id, branches in config["decisions"].items():
        for branch in branches:
            lines.append(f'{decision_id} -> {branch["target"]}: {branch["label"]}')
    
    lines.append("}")
    return "\n".join(lines)

# Генерируем и рендерим
d2_content = generate_d2(process)
with open("output.d2", "w") as f:
    f.write(d2_content)

subprocess.run(["d2", "output.d2", "output.svg"])
print("SVG generated: output.svg")