Initial commit: visual data tools research
This commit is contained in:
neo committed
commit
68b917401a
2 files changed
+538
No files matched your search
@@ -0,0 +1,265 @@
|
||||
# Visual Data Tools — Исследование инструментов для визуализации данных
|
||||
|
||||
> Дата: 2026-06-24
|
||||
> Автор: neo
|
||||
|
||||
---
|
||||
|
||||
## Сводка
|
||||
|
||||
Исследование лучших инструментов для генерации блок-схем, mindmap, DRAKON-диаграмм и других типов диаграмм. Цель — найти оптимальный рабочий процесс для быстрой и точной генерации диаграмм в проекте.
|
||||
|
||||
---
|
||||
|
||||
## 1. Диаграммы как код (Diagrams as Code)
|
||||
|
||||
### 1.1 D2 (Diagram as Code)
|
||||
- **Язык**: Собственный DSL (D2)
|
||||
- **Рендер**: CLI → SVG, PNG, PDF
|
||||
- **Плюсы**:
|
||||
- Лучший визуальный результат «из коробки»
|
||||
- Автоматическая топологическая раскладка
|
||||
- Переменные, функции, итерации (можно генерировать из Python)
|
||||
- Маркеры на стрелках, поддержка анимации
|
||||
- Простой читаемый синтаксис
|
||||
- **Минусы**: Меньше сообщество чем у Mermaid
|
||||
- **Использование**: Блок-схемы, архитектуры, DRAKON-подобные диаграммы, flowcharts
|
||||
- **Установка**: `brew install d2-lang` или с [GitHub](https://github.com/d2lang/d2)
|
||||
|
||||
**Пример D2:**
|
||||
```d2
|
||||
# diagram.d2
|
||||
x: {
|
||||
A -> B -> C
|
||||
B -> D
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 1.2 Mermaid
|
||||
- **Язык**: Markdown-like (встраивается в .md, .txt)
|
||||
- **Рендер**: Встроен в GitHub, GitLab, Notion; CLI `@mermaid-js/mermaid-cli` → PNG/SVG
|
||||
- **Плюсы**:
|
||||
- Встроен в GitHub/GitLab/Notion (без рендеринга)
|
||||
- Огромное сообщество
|
||||
- Поддержка: flowchart, state diagram, sequence, Gantt, ER-diagram
|
||||
- **Минусы**:
|
||||
- Визуально посредственно
|
||||
- Ограниченный контроль позиционирования
|
||||
- Сложно кастомизировать цвета/шрифты
|
||||
- **Использование**: Документация в Markdown, GitHub-репозитории
|
||||
|
||||
**Пример Mermaid:**
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[Старт] --> B[Процесс]
|
||||
B --> C{Решение}
|
||||
C -->|Да| D[Действие]
|
||||
C -->|Нет| E[Результат]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 1.3 PlantUML
|
||||
- **Язык**: UML-синтаксис
|
||||
- **Рендер**: CLI → SVG, PNG
|
||||
- **Плюсы**: Зрелый, поддержка UML, BPMN, много тем
|
||||
- **Минусы**: Медленный рендер, устаревший синтаксис
|
||||
- **Использование**: UML-диаграммы, sequence diagrams
|
||||
|
||||
---
|
||||
|
||||
### 1.4 Graphviz (DOT)
|
||||
- **Язык**: DOT DSL
|
||||
- **Рендер**: CLI → SVG, PNG, PDF
|
||||
- **Плюсы**: Мощная автоматическая раскладка для сложных графов
|
||||
- **Минусы**: Непрозрачный синтаксис, трудно контролировать внешний вид
|
||||
- **Использование**: Сложные графы, деревья, сетевые диаграммы
|
||||
|
||||
---
|
||||
|
||||
## 2. Mindmaps
|
||||
|
||||
### 2.1 markmap (РЕКОМЕНДУЕТСЯ)
|
||||
- **Язык**: Markdown (иерархия через заголовки/списки)
|
||||
- **Вывод**: Интерактивный HTML/JS
|
||||
- **Плюсы**:
|
||||
- Встроен в VS Code (расширение)
|
||||
- CLI: `npx markmap mindmap.md -o mindmap.html`
|
||||
- Полностью интерактивный (зум, сворачивание)
|
||||
- Легко генерировать из Python
|
||||
- Красивый современный дизайн
|
||||
- **Минусы**: Только markdown-вход (не визуальный редактор)
|
||||
- **Использование**: Быстрые mindmaps из markdown, документация
|
||||
|
||||
**Пример markmap-входа:**
|
||||
```markdown
|
||||
# Mindmap
|
||||
## Главный узел
|
||||
### Подузел 1
|
||||
- Ветвь 1.1
|
||||
- Ветвь 1.2
|
||||
### Подузел 2
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2.2 Другие варианты mindmaps
|
||||
- **Excalidraw** — визуальный редактор, «hand-drawn» стиль, идеален для набросков
|
||||
- **XMind** — десктопное приложение, визуальный редактор
|
||||
- **FreePlane** — open-source, мощный, но устаревший UI
|
||||
|
||||
---
|
||||
|
||||
## 3. Визуальные редакторы
|
||||
|
||||
### 3.1 Excalidraw
|
||||
- **Тип**: Визуальный, «hand-drawn» стиль
|
||||
- **Плюсы**: Быстрые наброски, drag-and-drop, коллаборация
|
||||
- **Минусы**: Нет автоматической раскладки, ручной layout
|
||||
- **Использование**: Быстрые обсуждения, дизайн, sketching
|
||||
|
||||
### 3.2 draw.io / diagrams.net
|
||||
- **Тип**: Визуальный, drag-and-drop
|
||||
- **Плюсы**: Много шаблонов, экспорт в SVG/PNG, интеграция с Google Docs/Confluence
|
||||
- **Минусы**: Нет автоматической раскладки
|
||||
- **Использование**: Классические блок-схемы, UML, архитектуры
|
||||
|
||||
### 3.3 tldraw
|
||||
- **Тип**: React-компонент, визуальный
|
||||
- **Плюсы**: Интерактивный, collaboration, drag-and-drop
|
||||
- **Минусы**: Требует фронтенд-проект
|
||||
- **Использование**: Встроенные визуальные редакторы в веб-приложениях
|
||||
|
||||
---
|
||||
|
||||
## 4. Специализированные инструменты
|
||||
|
||||
| Тип | Инструмент | Зачем |
|
||||
|---|---|---|
|
||||
| Architecture | Structurizr (C4 model) | Документация архитектуры из кода |
|
||||
| Architecture | diagrams (Python) | Python → диаграммы инфраструктуры (AWS, GCP) |
|
||||
| Sequence | Mermaid / D2 / PlantUML | API flows, взаимодействие сервисов |
|
||||
| Network | Graphviz | Сетевая топология, графы зависимостей |
|
||||
| Data viz | ECharts | Интерактивные дашборды с графиками |
|
||||
| Data viz | D3.js | Кастомная интерактивная визуализация |
|
||||
| DRAKON | SVG вручную | Полный контроль над дизайном, анимация, glow |
|
||||
|
||||
---
|
||||
|
||||
## 5. Рекомендованный рабочий процесс
|
||||
|
||||
```
|
||||
Быстрые наброски → Excalidraw (визуальный, скетчи)
|
||||
↓
|
||||
Mindmaps → markmap (markdown → интерактивный HTML)
|
||||
↓
|
||||
Блок-схемы/архитектура → D2 (красивый CLI, переменные, итерации)
|
||||
↓
|
||||
В Markdown → Mermaid (встроен в GitHub/GitLab)
|
||||
↓
|
||||
Pixel-perfect дизайн → SVG вручную (как dracon.html)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Примеры генерации из Python
|
||||
|
||||
### 6.1 Mindmap через markmap
|
||||
|
||||
```python
|
||||
import subprocess
|
||||
|
||||
# Создаём markdown
|
||||
mindmap = """
|
||||
# Проект
|
||||
## Backend
|
||||
### API
|
||||
### Database
|
||||
### Auth
|
||||
## Frontend
|
||||
### React
|
||||
### CSS
|
||||
"""
|
||||
|
||||
with open("mindmap.md", "w") as f:
|
||||
f.write(mindmap)
|
||||
|
||||
# Рендерим
|
||||
subprocess.run(["npx", "-y", "markmap-cli", "mindmap.md", "-o", "mindmap.html"])
|
||||
```
|
||||
|
||||
### 6.2 Блок-схема через D2
|
||||
|
||||
```python
|
||||
import subprocess
|
||||
|
||||
d2_content = """
|
||||
x: {
|
||||
shape: process
|
||||
A -> B -> C
|
||||
B -> D
|
||||
}
|
||||
"""
|
||||
|
||||
with open("diagram.d2", "w") as f:
|
||||
f.write(d2_content)
|
||||
|
||||
# Рендерим в SVG
|
||||
subprocess.run(["d2", "diagram.d2", "output.svg"])
|
||||
```
|
||||
|
||||
### 6.3 Mermaid из Python
|
||||
|
||||
```python
|
||||
import subprocess
|
||||
|
||||
mermaid = """flowchart LR
|
||||
A[Старт] --> B[Процесс]
|
||||
B --> C{Решение}
|
||||
C -->|Да| D[Действие]
|
||||
C -->|Нет| E[Конец]
|
||||
"""
|
||||
|
||||
with open("diagram.mmd", "w") as f:
|
||||
f.write(mermaid)
|
||||
|
||||
subprocess.run(["npx", "-y", "@mermaid-js/mermaid-cli", "diagram.mmd", "-o", "output.png"])
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Сравнительная таблица
|
||||
|
||||
| Критерий | D2 | Mermaid | PlantUML | Graphviz | markmap | Excalidraw |
|
||||
|---|---|---|---|---|---|---|
|
||||
| **Визуал «из коробки»** | ★★★★★ | ★★★ | ★★★ | ★★ | ★★★★ | ★★★ |
|
||||
| **Скорость создания** | ★★★★ | ★★★★★ | ★★★ | ★★ | ★★★★★ | ★★★★★ |
|
||||
| **Контроль дизайна** | ★★★ | ★★ | ★★ | ★★ | ★★★ | ★★★★ |
|
||||
| **Генерация из кода** | ★★★★ | ★★★ | ★★★ | ★★★★ | ★★★★ | ★★ |
|
||||
| **Встраивание в Markdown** | ★★ | ★★★★★ | ★★ | ★★ | ★★★ | ★★ |
|
||||
| **Интерактивность** | ★★ | ★★ | ★★ | ★★ | ★★★★★ | ★★★★ |
|
||||
| **Сообщество** | ★★★ | ★★★★★ | ★★★★ | ★★★★ | ★★★ | ★★★★ |
|
||||
|
||||
---
|
||||
|
||||
## 8. Итоговые рекомендации
|
||||
|
||||
### Для твоих задач (ROI24, wow-design, автоматизация):
|
||||
|
||||
1. **Блок-схемы процессов** — D2 (CLI, переменные, итерации) или SVG вручную (pixel-perfect)
|
||||
2. **Mindmaps для планирования** — markmap (markdown → интерактивный HTML)
|
||||
3. **Архитектура сервисов** — D2 или diagrams (Python)
|
||||
4. **Быстрые наброски** — Excalidraw
|
||||
5. **Документация в Gitea** — Mermaid (если Gitea поддерживает) или встроенный SVG
|
||||
|
||||
### Рекомендуемый стек:
|
||||
- **D2** для блок-схем
|
||||
- **markmap** для mindmaps
|
||||
- **SVG вручную** для pixel-perfect дизайна
|
||||
- **Python subprocess** как glue-код для генерации
|
||||
|
||||
---
|
||||
|
||||
*Источники: D2 (github.com/d2lang/d2), markmap (github.com/markmap/markmap), Mermaid (mermaid.js.org), PlantUML (plantuml.com), Graphviz (graphviz.org), Excalidraw (excalidraw.com)*
|
||||
Reference in new issue
Block a user