VPasCode расширяет поддержку Mermaid: диаграммы Исикавы, моделирования событий, Венна и карт Вардли теперь доступны

🚀 Visual Paradigm рад(а) объявить, что VPasCode – наша единая платформа диаграмм как кода – теперь поддерживает четыре дополнительных типа диаграмм Mermaid. Теперь вы можете создавать следующие профессиональные диаграммы с помощью простой текстовой нотации:

• 🐟 Диаграмма Исикавы (рыбий скелет / признак-следствие) – анализ коренных причин стал простым
• ⚡ Диаграмма моделирования событий – проектирование потока информации и временных линий в системе
• 🟡 Диаграмма Венна – визуализируйте отношения между множествами и их пересечения
• 🗺️ Карта Вардли – стратегическое картирование цепочки создания стоимости и анализ эволюции

Независимо от того, являетесь ли вы менеджером продукта, архитектором программного обеспечения, разработчиком или стратегом, VPasCode помогает вам создавать диаграммы с использованием синтаксиса, который вы уже знаете, с предварительным просмотром в реальном времени, одним кликом для обмена ссылкой и бесплатным экспортом в SVG/PNG.

🔍 Что делает VPasCode уникальным?

VPasCode (сокращение от Vизуальный PParadigm’s asCode платформа) — это единая среда преобразования текста в диаграммы. Она отображает PlantUML, Mermaid, Graphviz, и многое другое (с дополнительными форматами в будущем). Вы можете свободно переключаться между синтаксисами в одном и том же редакторе, не изучая несколько инструментов.

Это улучшение сосредоточено на последнем синтаксисе Mermaid (v11.12.3+ и v11.15.0+). Ниже вы найдете рабочие примеры кода для каждого нового типа диаграммы — просто скопируйте и вставьте их в VPasCode.

📌 1. Диаграмма Исикавы (рыбий скелет) – анализ коренных причин

Также известна как диаграмма причин и следствий или диаграмма рыбьего скелета. Идеально подходит для управления качеством и сессий по решению проблем.

✅ Пример – анализ коренных причин «Размытое фото»

ishikawa-beta
    Размытое фото
    Процесс
        Нет фокуса
        Слишком медленная выдержка
        Защитная пленка не снята
        Применён фильтр улучшения
    Пользователь
        Дрожащие руки
    Оборудование
        ОБЪЕКТИВ
            Неподходящий объектив
            Повреждённый объектив
            Загрязнённый объектив
        СЕНСОР
            Повреждённый сенсор
            Загрязнённый сенсор
    Окружение
        Объект двигался слишком быстро
        Слишком темно

💡 Примечания по синтаксису: первая строка определяет проблему («голова» рыбы). Отступы создают иерархические ветви причин (рыбьи кости).

📌 2. Диаграмма моделирования событий – поведение системы во времени

Моделирование событий описывает, как информация изменяется в системе с течением времени. Оно использует интерфейсы, команды, события и обработчики, организованные в дорожках. VPasCode поддерживает как компактный, так и свободный синтаксис, встроенные данные и внешние блоки данных.

✅ Минимальный пример – поток добавления товара в корзину

eventmodeling

tf 01 ui CartUI
tf 02 cmd AddItem
tf 03 evt ItemAdded

✅ Пример встроенных данных

eventmodeling

tf 01 ui CartUI
tf 02 cmd AddItem { description: string }
tf 03 evt ItemAdded { description: string }

✅ Блоки данных и множественные ссылки

eventmodeling

tf 01 ui CartUI
tf 02 cmd AddItem [[AddItem01]]
tf 03 evt ItemAdded [[ItemAdded]]
tf 04 cmd AddItem [[AddItem02]]
tf 05 evt ItemAdded [[ItemAdded]]

data AddItem01 {
  description: 'john'
  image: 'avatar_john'
  price: 20.4
}

data AddItem02 {
  description: 'jack'
  image: 'avatar_jack'
  price: 12.5
}

data ItemAdded {
  description: string
  image: string
  price: number
}

✅ Сброс кадра

моделирование событий

tf 01 ui CartUI
tf 02 cmd AddItem
tf 03 evt ItemAdded

rf 04 evt External.InventoryChanged
tf 05 pcr InventoryProcessor
tf 06 cmd ChangeInventory
tf 07 evt Cart.InventoryChanged

💡 Ключевые токены: tf (временной интервал), rf (сброс кадра), ui / cmd / evt / pcr / rmo (типы сущностей). Используйте пространства имён, такие как Inventory.InventoryChanged чтобы создать отдельные дорожки.

📌 3. Диаграмма Венна – отношения и пересечения множеств

Покажите логические отношения между множествами с помощью перекрывающихся кругов. Поддерживает пользовательские размеры, метки, текстовые узлы и стилизацию.

✅ Простой пример – пересечение команд

venn-beta
  title "Пересечение навыков команд"
  set Frontend
  set Backend
  union Frontend,Backend["Проектирование API"]

✅ Пример размеров, текстовых узлов и стилизации

venn-beta
  set A["Команда фронтенда"]:20
    text A1["React"]
    text A2["Системы проектирования"]
  set B["Команда бэкенда"]:12
    text B1["Разработка API"]
  union A,B["Навыки full-stack"]:3
    text AB1["Спецификация OpenAPI"]
  style A fill:#ff6b6b
  style A,B color:#2c3e50
  style A1 color:#e74c3c

💡 Используйте :число для управления размером круга, text чтобы добавить метки внутри множеств, и style для пользовательских цветов.

📌 4. Диаграммы Уордли — стратегическое картирование цепочки создания стоимости

Диаграммы Уордли помогают визуализировать компоненты бизнеса или системы, их положение в цепочке создания стоимости и стадию эволюции (Генезис → Собственная разработка → Продукт → Товар). VPasCode полностью поддерживает официальный синтаксис Mermaid для диаграмм Уордли, используяwardley-beta в качестве типа диаграммы.

✅ Пример — конвейер разработки программного обеспечения

wardley-beta
title Конвейер развертывания программного обеспечения

anchor "Потребности пользователей" [0.95, 0.70]
component "Ручное развертывание" [0.15, 0.25]
component "Скрипты CI/CD" [0.45, 0.50]
component "Автоматизированный конвейер" [0.75, 0.65]
component "Облачная инфраструктура" [0.30, 0.40]

"Потребности пользователей" -> "Автоматизированный конвейер"
"Автоматизированный конвейер" -> "Скрипты CI/CD"
"Скрипты CI/CD" -> "Ручное развертывание"
"Ручное развертывание" -> "Облачная инфраструктура"

evolve "Ручное развертывание" 0.20
evolve "Скрипты CI/CD" 0.55
evolve "Автоматизированный конвейер" 0.85
evolve "Облачная инфраструктура" 0.70

note "Применение облачных технологий ускоряет зрелость конвейера" [0.40, 0.35]

💡 Имена компонентов с пробелами должны быть заключены в двойные кавычки. Координаты изменяются от 0 до 1 по обоим осям (видимость против эволюции).

🛠️ Попробуйте VPasCode прямо сейчас

Перейдите к VPasCode редактору: https://www.vpascode.com/.

Выберите режим синтаксиса Mermaid, вставьте любой из приведённых выше примеров кода и наблюдайте, как ваша диаграмма мгновенно отображается.

Начните бесплатно – Не требуется кредитная карта, не нужно устанавливать. Вам нужен только браузер.

📖 Официальная документация и ссылки

• Официальный сайт Visual Paradigm

Visual Paradigm — профессиональное моделирование, упрощённое.
VPasCode — платформа для создания диаграмм на основе кода для команд, ценящих эффективность, совместную работу и текстовое моделирование диаграмм.