Initial commit: visual data tools research

examples.md

@@ -0,0 +1,273 @@
+# Примеры диаграмм для визуального сравнения
+
+## D2 — Блок-схема процесса
+
+```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
+
+```mermaid
+sequenceDiagram
+    participant Client
+    participant API
+    participant DB
+    
+    Client->>API: POST /process
+    API->>DB: save data
+    DB-->>API: ok
+    API->>Client: 200 OK
+```
+
+---
+
+## Mermaid — Flowchart
+
+```mermaid
+flowchart TD
+    A[Старт] --> B[Брифинг клиента]
+    B --> C[Аудит процессов]
+    C --> D{Процессы<br/>прозрачны?}
+    D -->|Да| E[Создание<br/>DRAKON-схем]
+    D -->|Нет| F[Уточняем<br/>процесс]
+    F -->|возврат| G[Согласование]
+    E --> G
+    G --> H[Готово]
+```
+
+---
+
+## markmap — Mindmap
+
+```markdown
+# Визуализация данных
+## Блок-схемы
+### D2
+- CLI-рендер
+- Переменные
+- Итерации
+### Mermaid
+- Markdown
+- GitHub/GitLab
+### SVG вручную
+- Полный контроль
+- Анимация
+## Mindmaps
+### markmap
+- Markdown-вход
+- Интерактивный
+- VS Code
+## Архитектура
+### diagrams (Python)
+- AWS/GCP
+- Network
+### Structurizr
+- C4 model
+```
+
+---
+
+## PlantUML — Component Diagram
+
+```plantuml
+@startuml
+component "API Server" as api
+component "Database" as db
+component "Cache" as cache
+
+api --> db
+api --> cache
+@enduml
+```
+
+---
+
+## Graphviz — Network Diagram
+
+```dot
+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
+
+```d2
+{
+  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-подобная схема
+
+```d2
+{
+  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
+
+```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")
+```