📊 Mermaid Viewer

Мобильное приложение для просмотра и редактирования Mermaid диаграмм на Flutter.

🎯 Основные возможности

✏️ Редактор кода

• Удобный текстовый редактор с monospace шрифтом
• Автосохранение последней диаграммы
• Быстрая очистка кода
• Встроенная библиотека примеров

📊 Просмотр диаграмм

• Рендеринг Mermaid диаграмм через WebView/iframe (адаптивно под платформу)
• Зум жестами:
  • Мобильные: щипок двумя пальцами для масштабирования
  • Web: колесико мыши для зума
• Перемещение:
  • Мобильные: удерживайте палец и перемещайте viewport
  • Web: клик + drag мышью для перемещения
• Кнопки быстрого управления:
  • + - увеличить масштаб
  • - - уменьшить масштаб
  • ⟲ - сбросить масштаб и позицию

🎨 Поддерживаемые типы диаграмм

1. Flowchart (Блок-схемы)

graph TD
    A[Start] --> B[Process]

Loading

2. Sequence Diagrams (Диаграммы последовательности)

sequenceDiagram
    User->>App: Action
    App-->>User: Response

Loading

3. Class Diagrams (Диаграммы классов)

classDiagram
    class Animal {
        +String name
        +makeSound()
    }

Loading

4. State Diagrams (Диаграммы состояний)

stateDiagram-v2
    [*] --> Active
    Active --> [*]

Loading

5. Gantt Charts (Диаграммы Ганта)

gantt
    title Project Schedule
    section Phase 1
    Task 1 :a1, 2024-01-01, 5d

Loading

🚀 Технологии

• Flutter 3.35.4 - фреймворк для кросс-платформенной разработки
• webview_flutter 4.10.0 - рендеринг Mermaid через WebView
• shared_preferences 2.5.3 - локальное хранилище для автосохранения
• Mermaid.js 10.x - библиотека для генерации диаграмм

🎨 Особенности UI/UX

• ✅ Material Design 3
• ✅ Светлая и темная темы (автоматически по системе)
• ✅ SafeArea для корректного отображения на всех устройствах
• ✅ Плавные анимации и переходы
• ✅ Интуитивное переключение между редактором и просмотром

📱 Управление

В режиме редактора:

• Иконка примеров (📚) - выбрать готовый пример диаграммы
• Иконка очистки (🗑️) - очистить весь код
• Иконка сохранения (💾) - сохранить текущую диаграмму
• Иконка просмотра (👁️) - переключиться в режим просмотра

В режиме просмотра:

• Щипок двумя пальцами - зум диаграммы
• Удержание и перемещение - сдвиг viewport
• Кнопки +/-/⟲ - управление масштабом
• Иконка редактора (✏️) - вернуться к редактированию

🛠️ Сборка и запуск

Web версия

flutter build web --release
python3 -m http.server 5060 --directory build/web --bind 0.0.0.0

Android APK

flutter build apk --release

📝 Примеры использования

Приложение включает встроенные примеры для:

• Блок-схем процессов
• Диаграмм взаимодействия
• UML диаграмм классов
• Диаграмм состояний
• Графиков проектов

🎯 Целевая платформа

• ✅ Android (основная)
• ✅ Web (предпросмотр и тестирование)

📄 Лицензия

MIT License

---

Разработано с ❤️ на Flutter