Псевдографика
Назначение, достоинства и недостатки
Псевдографика предназначена для небольших, поясняющих схем в тексте. Там, где растровая или векторная графика либо невозможна (например, исходный код программы), либо нецелесообразна (например, комментарий или пояснение).
К достоинствам псевдографики можно отнести:
- Простоту рисования. Достаточно использовать любой текстовый редактор. Нет необходимости открывать графический редактор.
- Монолитность текста, отсутствие необходимости интегрировать или прикладывать к тексту графическое изображение. Это позволяет включать псевдографику в разметку Markdown, в исходный код программ, комментарии.
- Крайне малый объём текстового файла.
Бесспорно, существуют и недостатки подобного «рисования»:
- Чем сложнее схема, тем больше времени займёт не столько само рисование, сколько подгонка символов.
- Фигуры, отличные от прямоугольника будут выглядеть угловатыми.
- Для отображения псевдографики нужен либо моноширинный шрифт, либо шрифт, поддерживающий лигатуры.
Приёмы рисования и оформления
Разметка Markdown
Рисунки, выполненные линиями псевдографики, следует оформлять по правилам программного кода: окружать тремя обратными кавычками или тремя тильдами.
`~~~ Markdown`
╔════════════════════════╗ /\___/\
║ Рисунок псевдографикой ║ (==^.^==)
╚════════════════════════╝ (") (")_/
`~~~`Инструменты рисования
Инструментарий для рисования псевдографикой довольно скромный:
- клавиша пробела (Space);
- клавиша вставки (Insert);
- комбинации клавиш копирования (Ctrl+C) и вставки (Ctrl+V).
Клавиша пробела служит для позиционирования глифов в поле рисунка.
«Ластиком» для забоя ненужных символов служит клавиша вставки Insert. Она заменяет символы и при этом не сдвигает строку (не ломает изображение).
Ещё раз напомню, что следует применять моноширинный шрифт.
Набор глифов
Как в любом тексте, в псевдографике очень полезны готовые фрагменты. Например:
- стрелки Юникода;
- линии;
- блоки;
- набор декоративной нумерации;
- набор геометрических фигур;
- готовые схемы прошлого опыта (некоторые примеры приведены ниже).
Стрелки
Для рисования стрелок можно использовать:
- стрелки Юникода;
- треугольники;
- знаки больше или меньше, если шрифт поддерживает лигатуры.
Пример применения треугольников: ▷ ▶ ▹ ▸:
□─◁──▷─╮ □─╮ ╭─╮ ╭─□
╭─◀──▶─╯ △ ▲ ▵ ▴
╰─◂──▸─╮ │ │ │ │
╭─◃──▹─╯ ▽ ▼ ▿ ▾
╰─◂──▸─□ ╰─╯ ╰─╯Пример применения лигатур <--->, <===> и ↕.
□ □─╮ ╭─□
╰─←───→─╮ ↑ ↕
│ │ │
╭─<===>─╯ ↓ ↕
□ ╰─╯Линии
Прямоугольники можно рисовать не только сплошными линиями, но и пунктиром. Например:
╭────▷───╮ ┏━━━━▶━━━┓ ╔════▶═══╗
│ ╭─□──╮ │ ┃ ┏━■━━┓ ┃ ║ ╔═■══╗ ║
△ │ │ ▽ ▲ ┃ ┃ ▼ ▲ ║ ║ ▼
│ ╰───◦╯ │ ┃ ┗━━━•┛ ┃ ║ ╚═══•╝ ║
╰───◁────╯ ┗━━━◀━━━━┛ ╚═══◀════╝
╭╌╌╌╌▷╌╌╌╮ ┏╍╍╍╍▶╍╍╍┓ ·──·──·──·
┆ ╭╌□╌╌╮ ┆ ┇ ┏╍■╍╍┓ ┇ │ ·──· │
△ ┆ ┆ ▽ ▲ ┇ ┇ ▼ · │ │ ·
┆ ╰╌╌╌◦╯ ┆ ┇ ┗╍╍╍•┛ ┇ │ ·──· │
╰╌╌╌◁╌╌╌╌╯ ┗╍╍╍◀╍╍╍╍┛ ·──·─·─·─·
╭┈┈┈┈▷┈┈┈╮ ┏┉┉┉┉▶┉┉┉┓
┊ ╭┈□┈┈╮ ┊ ┋ ┏┉■┉┉┓ ┋
△ ┊ ┊ ▽ ▲ ┋ ┋ ▼
┊ ╰┈┈┈◦╯ ┊ ┋ ┗┉┉┉•┛ ┋
╰┈┈┈◁┈┈┈┈╯ ┗┉┉┉◀┉┉┉┉┛
╭╮╭╮╭╮╭╮ △ △ △ △ ╭─╮ ╭─╮ ╭─╮ ╭─╮
╭─╯╰╯╰╯╰╯│ ╶╯╶╯╶╯╶╯╷ ╭──╯∙╰─╯∙│ ▷┤□├▷┤□├▽
╰╮ ╰╮ ◁╮ ╰▷ │∙ │ ╭┴┼─╯ ╰─┼┴╮
╭╯ ╭╯ ╵ ╷ ╰╮ ╰╮ │□│ │□│
╰╮ ╰╮ ◁╮ ╰▷ │ ∙│ ╰┬╯ ╰┬╯
╭╯ ╭╯ ╵ ╷ ╭╯ ╭╯ △ ▽
╰╮ ╰╮ ◁╮ ╰▷ │∙ │ ╭┴╮ ╭┴╮
╭╯ ╭╯ ╵ ╷ ╰╮ ╰╮ │□│ │□│
╰╮ ╰╮ ◁╮ ╰▷ │ ∙│ ╰┬┼─╮ ╭─┼┬╯
│╭╮╭╮╭╮╭─╯ ╵╭╴╭╴╭╴╭╴ │∙╭─╮∙╭──╯ △┤□├◁┤□├◁
╰╯╰╯╰╯╰╯ ▽ ▽ ▽ ▽ ╰─╯ ╰─╯ ╰─╯ ╰─╯Штриховка
Несмотря на то, что штриховка возможна, не рекомендую её применять без особой нужды. Выглядит она грубо и грязно.
╭────┬────────┬────╮
│░░░░╰────────╯░░░░│
│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
│▒▒▒╭─╮▒▒▒▒▒▒╭─╮▒▒▒│
│▒▒▒╰─╯▒▒▒▒▒▒╰─╯▒▒▒│
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
╰──────────────────╯Примеры рисунков псевдографикой
Древовидная структура
Пример рисования структуры деревьев: каталогов (ветвей, узлов) и файлов (листьев, терминальных узлов).
■━ /home/user/.local/share/zim/
┣━■ plugins
┃ └─□ plugin.txt
┗━■ templates
┗━■ wiki
└─□ default.txtТолстая линия обозначает каталог и его содержимое. Например, каталог /home/user/.local/share/zim/ содержит два каталога: plugins и templates.
Тонкая линия обозначает файл. Например, каталог plugins содержит файл plugin.txt, а каталог wiki содержит файл default.txt.
Линейная последовательность событий
На горизонтальной линии отмечаем события (этапы, шаги, процессы, операции), а затем ниже подписываем метки событий.
ls source.md 3-5,9
╶─────▲────▲─────────▲──▲╴
команда╶╯ │ │ │
ввод файла╶──╯ │ │
выбор страниц 3,4,5╶───╯ │
и страницы 9╶─────────────╯Процессы
Обычно последовательность процессов (операций) изображают в виде прямоугольников и стрелок. Стрелки указывают на порядок выполнения действий. При этом:
- для изображения логических операций можно использовать глифы: ◊ ◇ 🞙 ◆;
- для начала и конца цепочки процессов: □ ■ ▫ ▪;
- для событий: ● 🞉 🞈 🞇 🞆 🞅 ⚬.
Простые схемы BPMN вполне можно отобразить подобным образом.
╭───────────────────────╮
╷123╭────▶┤ наименование процесса │
╰───╯ ╰───────────────────────╯
╭────▶──╮A╷
╭───╮ ┏━━━┓ ╔═══╗ │ ╰─╯
0-->┤ 1 ┝━━━▶┫ 2 ┣===>╣ 3 ╟──●────▶──╮B╷
╰───╯ ┗━┯━┛ ╚═╤═╝ │ ╰─╯
╰---<----╯ ╰────▶──╮C╷
╰─╯
╔══════════╗
║ 1 ║ ▐▀▀▀▀▀▀▀▀▜
║ ╭─────╫───╮ ▐ 3 ▐
╚════╪═════╝ 2 │ <==> ▐▄▄▄▄▄▄▄▄▟
╰─────────╯Дерево принятия решения
Пример блок-схемы принятия решения.
┏━━━━━━━━━━━━━┓
┃ Какой цвет? ┃
┗━┯━━━━━━━━━━━┛
│ ╭───────╮
│ ╭──┤красный├─▷╮ Неплохо! ╭─□
▽ │ ╰───────╯ ╰══════════╯
╰──● ╭─────╮ ┏━━━━━━━┓
├──┤Синий├─▷┨Тёмный?┠──╮
│ ╰─────╯ ┗━━━━━━━┛ │
│ ╭───◁────────────────╯
│ │ ╭───╮
│ ╰─◆─┤Да ├─▷╮И потемнее!╭─□
│ │ ╰───╯ ╰═══════════╯
│ │ ╭───╮
│ ╰─┤Нет├─▷╮Но не голубой же!╭─□
│ ╰───╯ ╰═════════════════╯
│ ╭───────╮
├──┤Залёный├─▷╮Тоскливо ╭─□
│ ╰───────╯ ╰═════════╯
│ ╭─────╮
╰──┤Белый├─▷╮Лучше всего!╭─□
╰─────╯ ╰════════════╯График
Если нужно визуализировать тенденцию и не важны точные значения в каждой точке, то можно изобразить это с помощью линий или блоков.
╭─╮◁─╮
╭╮ │ │ ╰──╴max 235
╭╮││ ╭╯ │
│╰╯│╭─╯ │
╭╮ │ ││ │
╭─╮││╭╮ ╭──╮╭╮ │ ╰╯ ╰╮
╭╯ ╰╯╰╯│ ╭╯ ╰╯╰─╮ │ │ ╭╮
◁─╯ ╰──╯ ╰──╯ ╰─╯╰────▷
◀═══════════════ время ══════════════════▶
╭────────────╮
▲ │максимальный│
┃ ▄ ▗▟█ ←─┤трафик │
Qdx █▌ ████ ╰────────────╯
┃ ▗▄█▌ █████▙
┃ ▟███████▄█████████▄▄▄ ▗▄
┃▐▄▄████████████████████████████▄▄▖
╺━━━━━━━━━━╸время╺━━━━━━━━━━━━━━━━▶Пояснение условных обозначений
Иногда необходимо пояснить значение условных обозначений на схеме или в математическом выражении. Рассмотрим как это делать на уравнении, которое можно встретить в повседневной деятельности каждого веб-дизайнера.
╭─────────────────────╴Производная времени
│ ╭──────────╭────╴Состояние кванта в момент времени t
│ │ │ (квадрат абсолютного значения
╭▽─╮ ╭─▽──╮ ╭─▽──╮ равен плотности вероятности)
┏━━━━━┷━━┷━┷━━━━┷━━━━━┷━━━━┷━┓
┃ i ħ d/dt |Ψ(t)> = Ĥ |Ψ(t)> ┃ <== Уравнение Шрёдингера
┗━△━△━━━━△━━━━△━━━━━△━━━━△━━━┛
│ │ ╰────╰─────┤────╰───╴Время
│ │ ╰────────╴Гамильтониан
│ ╰────────────────────────╴Уменьшенная постоянная Планка
╰──────────────────────────╴Мнимое число i²=-1Лингвистика
Модную тему лингвистики нейросетей также возможно визуализировать. Например, лексический разбор русско-испанского соответствия.
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃ красивый стол стоит ┃
┗┯━━━━━━━━━━━━━━━━━━━━━┛
│ ╭────┬─────┬─────╴корни слов
↕ ╭┴╮ ╭┴─╮ ╭┴─╮
┏┷━━━┿━┿━━┿━━┿━━┿━━┿━━━┓
┃ la bella tablo stars ┃
┗━━━━┿━┿△━┿━━┿△━┿━━┿△━━┛
╰─╯│ ╰──╯│ ╰──╯│ ┏━━━━━ суффиксы ━━━━━━┓
│ │ ╰──╂╴as: настоящее время ┃
│ │ ┃ os: будущее время ┃
│ │ ┃ is: прошедшее время ┃
│ ╰────────╂╴ o: существительное ┃
╰──────────────╂╴ a: прилагательное ┃
┃ e: глагол ┃
┗━━━━━━━━━━━━━━━━━━━━━┛Визуализация списка
В случае необходимости можно пояснить порядок и значения данных в списках, кортежах, матрицах.
'(a b c)
┏━━━┳━━━┓ ┏━━━┳━━━┓ ┏━━━┳━━━┓
●━━━▶┫ ● ┃ ●─╂-->┨ ● ┃ ●─╂--->┨ ● ┃nil┃
┗━┿━┻━━━┛ ┗━┿━┻━━━┛ ┗━┿━┻━━━┛
│ ╰──────────╮ │
│ ╭─────┬───────────╮ │ │
╰─▷┤"a\0"│properties │ │ │
├─────┼───────────┤ │ │
│"b\0"│properties ├◁╯ │
├─────┼───────────┤ │
│"c\0"│properties ├◁──╯
╰─────┴───────────╯