Огонек | Notion Buildin | Планеры

Огонек | Notion Buildin | Планеры

🌗 Круговые диаграммы не выходя из Notion? Mermaid часть 3 #лайфхак 🌈 Возможности Mermaid не ограничиваются схемами - есть еще пара трюков. Самый полезный из них - рисование круговых диаграмм. 1⃣ Создаем блок кода Mermaid. 2⃣ Задаем нашей диаграмме название:…

0:56

This media is not supported in your browser

VIEW IN TELEGRAM

🍭 Цветные круговые диаграммы в Notion
#лайфхак

Мы уже умеем создавать круговые диаграммы в Notion с помощью Mermaid. Но по умолчанию все сегменты нашей круговой диаграммы отображаются в 50 оттенках серого монохроме.

Для добавления цвета в диаграмму в код в любое место (хоть в начале, хоть в конце, хоть посередине) нужно добавить 💫волшебную строчку💫:
%%{init: {'theme': 'base', 'themeVariables': { 'pie1': '#FFFFFF', 'pie2': '#FFFF00'}}}%%

Здесь 'pie1' - это cлово pie и порядковый номер указанного сегмента в коде (сверху - вниз, номер без пробела), а символы с хэшем после двоеточия - знакомый нам HEX код цвета, который с легкостью выбирается на сайте https://htmlcolorcodes.com/

Пример:
pie title Радуга
"Каждый" : 5
"Охотник" : 20
"Желает" : 30
"Знать" : 10

Идем по порядку:
"Каждый" = 'pie 1',
"Охотник" = 'pie 2'
...и так далее через запятую столько 'pie', сколько сегментов на диаграмме:

%%{init: {'theme': 'base', 'themeVariables': { 'pie1': '#DA4C2D', 'pie2': '#FFFF00', 'pie3': '#00FF00', 'pie4': '#0000FF', 'pie5': '#800080', 'pie6': '#ff0000', 'pie7': '#FFA500'}}}%%

✨ Меняется только количество 'pie' и хэши цветов. Остальное не меняем, иначе сломается))

Еще там диаграмму Гантта можно делать с помощью Mermaid - кому интересно, вот описание на английском https://mermaid.js.org/syntax/gantt.html
Это уже за пределами разумного применения в Notion, но поиграться можно 😅

Please open Telegram to view this post

VIEW IN TELEGRAM

www.tg-me.com/ca/telegram/com.notion_ogonek/128

1.5K viewsedited  Apr 10, 2023 at 17:24

🍭 Цветные круговые диаграммы в Notion
#лайфхак

Мы уже умеем создавать круговые диаграммы в Notion с помощью Mermaid. Но по умолчанию все сегменты нашей круговой диаграммы отображаются в 50 оттенках серого монохроме.

Для добавления цвета в диаграмму в код в любое место (хоть в начале, хоть в конце, хоть посередине) нужно добавить 💫волшебную строчку💫:
%%{init: {'theme': 'base', 'themeVariables': { 'pie1': '#FFFFFF', 'pie2': '#FFFF00'}}}%%

Здесь 'pie1' - это cлово pie и порядковый номер указанного сегмента в коде (сверху - вниз, номер без пробела), а символы с хэшем после двоеточия - знакомый нам HEX код цвета, который с легкостью выбирается на сайте https://htmlcolorcodes.com/

Пример:
pie title Радуга
"Каждый" : 5
"Охотник" : 20
"Желает" : 30
"Знать" : 10

Идем по порядку:
"Каждый" = 'pie 1',
"Охотник" = 'pie 2'
...и так далее через запятую столько 'pie', сколько сегментов на диаграмме:

%%{init: {'theme': 'base', 'themeVariables': { 'pie1': '#DA4C2D', 'pie2': '#FFFF00', 'pie3': '#00FF00', 'pie4': '#0000FF', 'pie5': '#800080', 'pie6': '#ff0000', 'pie7': '#FFA500'}}}%%

✨ Меняется только количество 'pie' и хэши цветов. Остальное не меняем, иначе сломается))

Еще там диаграмму Гантта можно делать с помощью Mermaid - кому интересно, вот описание на английском https://mermaid.js.org/syntax/gantt.html
Это уже за пределами разумного применения в Notion, но поиграться можно 😅