Как написать круговую диаграмму Mermaid?

Начните с `pie title Ваш Заголовок` в первой строке, затем перечислите каждый сегмент как `"Метка" : значение` на отдельных строках. Значениями могут быть любые положительные числа — Mermaid автоматически преобразует их в проценты. Пример: `pie title Доля браузеров \n "Chrome" : 65.2 \n "Safari" : 19.1 \n "Firefox" : 4.0`. Вам не нужно, чтобы сумма значений равнялась 100.

Могу ли я контролировать цвет каждого сегмента?

Круговые диаграммы Mermaid используют автоматически назначаемую цветовую палитру на основе темы диаграммы. Вы не можете напрямую указывать цвета для каждого сегмента в синтаксисе диаграммы. Для настройки цветов вам потребуется применить пользовательскую тему Mermaid или постобработать вывод SVG. Для презентаций, требующих определенных фирменных цветов, редактирование экспортированного SVG в векторном редакторе, таком как Figma или Inkscape, является наиболее практичным подходом.

Существует ли максимальное количество сегментов для круговой диаграммы Mermaid?

Жесткого ограничения нет, но круговые диаграммы становятся трудночитаемыми при количестве сегментов более 7–8, поскольку секторы становятся слишком узкими для четкой маркировки. Лучшая практика — группировать мелкие категории в корзину «Другое», если любой отдельный сегмент составляет менее 3–5% от общего числа. Mermaid попытается отрисовать любое количество сегментов, но читаемость значительно ухудшается при количестве более 10.

Когда следует использовать круговую диаграмму вместо диаграммы Ганта или временной шкалы?

Используйте круговую диаграмму, когда вы хотите показать соотношение части к целому для одного момента времени — пропорции, распределения, доли. Используйте диаграмму Ганта, когда вам нужно показать задачи, продолжительность и расписание по временной оси. Используйте временную шкалу, когда вы хотите отметить конкретные события в хронологическом порядке. Круговые диаграммы отвечают на вопрос «сколько от общего числа?»; диаграммы Ганта и временные шкалы отвечают на вопрос «когда?».

Просмотр круговой диаграммы Mermaid

Мгновенно отрисовывайте круговые диаграммы Mermaid в браузере. Визуализируйте пропорциональные данные и экспортируйте в SVG или PNG. Бесплатный онлайн-инструмент.

Код Mermaid

Предпросмотр

Введите код Mermaid для предпросмотра вашей диаграммы

Круговые диаграммы с первого взгляда показывают пропорциональное распределение — доля рынка, распределение бюджета, источники трафика, использование функций или результаты опросов. Синтаксис Mermaid `pie` является самым простым из всех типов диаграмм Mermaid: только заголовок и список пар «метка-значение». Эта простота делает круговые диаграммы частым результатом работы ИИ-ассистентов, когда пользователи запрашивают быструю визуализацию данных. Когда менеджеры продуктов просят Claude или ChatGPT «Покажи мне разбивку каналов привлечения наших пользователей» или разработчики спрашивают «Визуализируй распределение кодов ошибок HTTP в логах нашего API», они часто получают круговую диаграмму Mermaid. Zolkit мгновенно отрисовывает диаграмму, чтобы вы могли проверить метки, пропорции и общее визуальное впечатление перед экспортом для отчета или презентации. Круговые диаграммы Mermaid автоматически рассчитывают проценты из исходных значений и соответствующим образом маркируют каждый сегмент. Просмотрщик экспортирует четкие SVG для встраивания в веб или PNG в 2× для включения в слайд-шоу, документы Word и отчеты по электронной почте. Для более сложных задач визуализации данных рассмотрите возможность сочетания круговых диаграмм с диаграммами Ганта (для распределения по времени) или временными диаграммами.

Связанные диаграммы

← Просмотрщик диаграмм Mermaid Просмотрщик диаграмм Ганта Mermaid Просмотрщик диаграмм временной шкалы Mermaid Просмотрщик ментальных карт Mermaid

Бесплатный онлайн-просмотрщик и экспортер диаграмм Mermaid

Просмотрщик диаграмм Mermaid от Zolkit позволяет вставлять любой код Mermaid и мгновенно видеть отрисованную диаграмму — без установки, регистрации и загрузки на сервер. Все работает в вашем браузере, что делает его самым быстрым способом проверки диаграмм, сгенерированных ИИ из Claude, ChatGPT или Gemini. Поддерживаются все основные типы диаграмм Mermaid: блок-схемы, диаграммы последовательности, диаграммы классов, ER-диаграммы, диаграммы Ганта, диаграммы состояний, ментальные карты, графы Git, круговые диаграммы и временные шкалы.

Мгновенный предпросмотр в реальном времени

Диаграммы отрисовываются автоматически по мере ввода с задержкой в 300 мс, поэтому работа никогда не кажется медленной.

100% конфиденциальность

Весь рендеринг происходит в вашем браузере с использованием mermaid.js. Ваш код никогда не отправляется на какой-либо сервер.

Экспорт SVG и PNG

Загрузите свою диаграмму в виде четкого векторного SVG или высококачественного PNG 2×, готового для документов и презентаций.

Все типы диаграмм Mermaid

Поддерживает блок-схемы, диаграммы последовательности, диаграммы классов, ER-диаграммы, диаграммы Ганта, ментальные карты, графы Git и многое другое.

Готовность к диаграммам от ИИ

Создан для эпохи ИИ — напрямую предпросматривайте диаграммы, сгенерированные Claude, ChatGPT, Gemini или любым другим LLM.

Всегда бесплатно

Учетная запись не требуется, нет ограничений на использование, нет водяных знаков. Просмотрщик Mermaid от Zolkit полностью бесплатен навсегда.

Как предпросмотреть диаграмму Mermaid

1
Вставьте ваш код Mermaid в редактор слева — вы можете скопировать его из ИИ-помощника или написать вручную.
2
Диаграмма мгновенно отрисовывается в панели предпросмотра справа. Если есть синтаксическая ошибка, сообщение объяснит проблему.
3
Нажмите «Экспорт SVG» или «Экспорт PNG», чтобы загрузить диаграмму в виде файла, готового для документации, презентаций или обмена.