Хакеры и художники
Хотя программисты большую часть времени работают с персонажами, они иногда рисуют диаграммы, как инженеры в строительстве или производстве, например:
- Чтобы показать, как несколько систем работают вместе для достижения бизнес-требований, рисуются диаграммы последовательности;
- Чтобы выразить отношения между бизнес-сущностями, хранящимися в базе данных, будет построена диаграмма ER;
- Для того чтобы выразить изменения состояния сложных бизнес-объектов на протяжении их жизни, строятся диаграммы состояний.
В дополнение к этому есть блок-схемы, диаграммы Ганта, диаграммы пламени и многое другое.
Хотя эти диаграммы, созданные в процессе разработки программного обеспечения, не обязательно реалистичны, красивы или строги, с различными формами, цветами и расположением на диаграммах картинка стоит тысячи слов.
Диаграммы полезны, но не менее полезны и инструменты для их рисования. Если это локальное настольное приложение, большинство людей могут использовать Visio на платформе Windows или OmniGraffle на платформе macOS; когда дело доходит до рисования веб-сайтов, они могут выбрать ProcessOn или Draw.io.
Но я предпочитаю рисовать с помощью кода, а не перетаскивать мышью.
Рисовать по коду?
Рисование с кодом можно условно разделить на две категории:
- Используйте определенный язык программирования для управления определенным API рисования для рисования желаемой графики, например OpenGL, Canvas в HTML5;
- Используйте DSL, чтобы описать диаграмму, которую вы хотите нарисовать, а затем используйте программу, чтобы сгенерировать изображение в соответствии с DSL.
то, что я сказалчертеж с кодомОтносится ко второй категории выше.
Видеть лучше, чем слышать сотни вещей, и проще всего начать сDOTязык в качестве примера, сохраните следующее в файле с именемhello.dotв файле
digraph G {
Hello -> World
}
Затем выполните следующую команду в оболочке
dot -Tpng hello.dot -o hello.png
Получается соответствующий файл PNG
больше каштанов
Давайте познакомим читателей с тем, какие инструменты можно использовать для рисования различных графиков.
блок-схема
Когда дело доходит до диаграмм, нарисованных программистами, самой известной является блок-схема. Я смутно помню, что когда я учился в старших классах, в учебнике по математике в каком-то томе рассказывалось об алгоритмах (может быть, подбрасывании и делении), и давали схему, которая должна быть блок-схемой, которую я впервые увидел. После колледжа я какое-то время был одержим поиском DSL, который мог бы рисовать блок-схемы, но это так и не было реализовано. Пока не столкнулся с Boostnote, не знал, что есть такой DSL, т.е.flowchart.js.
flowchart.jsЭто написанная на JS библиотека для рисования блок-схем. Например, картинка ниже
генерируется в соответствии со следующим DSL
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
flowchart.jsПолученный файл изображения имеет формат SVG, но файлы SVG неудобно встраивать в документы Markdown или Confluence, поэтому я конвертирую его в формат PNG. После некоторого метания я обнаружил, что самый надежный метод на Mac — встроить файл SVG в документ HTML, затем открыть HTML в браузере, а затем скопировать изображение впредварительный просмотрСэкономьте на программе.
К сожалению, ни Emacs, ни VSCode не помогли в редактировании.flowchart.jsDSL-плагин.
Конечный автомат
Схематические диаграммы конечных автоматов также являются очень распространенной графикой, особенно в главах по анализу книг, объясняющих компиляторы. На официальном сайте проекта GraphvizРаздел Галерея, есть пример конечного автомата
Он состоит из следующихDOTописание кода
digraph finite_state_machine {
rankdir=LR;
size="8,5"
node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;
node [shape = circle];
LR_0 -> LR_2 [ label = "SS(B)" ];
LR_0 -> LR_1 [ label = "SS(S)" ];
LR_1 -> LR_3 [ label = "S($end)" ];
LR_2 -> LR_6 [ label = "SS(b)" ];
LR_2 -> LR_5 [ label = "SS(a)" ];
LR_2 -> LR_4 [ label = "S(A)" ];
LR_5 -> LR_7 [ label = "S(b)" ];
LR_5 -> LR_5 [ label = "S(a)" ];
LR_6 -> LR_6 [ label = "S(b)" ];
LR_6 -> LR_5 [ label = "S(a)" ];
LR_7 -> LR_8 [ label = "S(b)" ];
LR_7 -> LR_5 [ label = "S(a)" ];
LR_8 -> LR_6 [ label = "S(b)" ];
LR_8 -> LR_5 [ label = "S(a)" ];
}
Многие инструменты будутDOTЯзык используется как посредник для реализации функции рисования.
а такжеflowchart.jsОтличается тем, что и Emacs, и VSCode хорошо его поддерживают.DOTРедактирование и предварительный просмотр кода. Emacs имеетdot-mode, VSCode имеетGraphviz (dot) language support for Visual Studio Codeэтот плагин.
Временная диаграмма
Больше всего я рисую временные диаграммы. в старом тексте«Инструмент для рисования временных диаграмм», упоминаются три инструмента:
- WebSequenceDiagrams, веб-сайт, который рисует временные диаграммы онлайн;
- sdedit, локальная командная строка и графический инструмент для рисования;
- SequenceDiagram, а также веб-сайт.
склонны использоватьsdedit. время прошло, теперьWebSequenceDiagramsВыглядит лучше, и я тоже выбираюPlantUML作为绘制时序图的主力工具。 На картинке нижеPlantUMLПримеры, приведенные на официальном сайте
Генерируется по следующему коду
@startuml
用户 -> 认证中心: 登录操作
认证中心 -> 缓存: 存放(key=token+ip,value=token)token
用户 <- 认证中心 : 认证成功返回token
用户 -> 认证中心: 下次访问头部携带token认证
认证中心 <- 缓存: key=token+ip获取token
其他服务 <- 认证中心: 存在且校验成功则跳转到用户请求的其他服务
其他服务 -> 用户: 信息
@enduml
Emacsplantuml-modeи VSCodePlantUMLПлагины могут бытьPlantUMLDSL обеспечивает подсветку синтаксиса.
загруженPlantUMLизjarПосле пакета добавьте следующую конфигурацию в Emacs, вы можете создавать изображения в формате PNG, не полагаясь на удаленный сервер.
(setq plantuml-default-exec-mode 'jar)
(setq plantuml-jar-path "/path/to/plantuml.jar")
Диаграмма вариантов использования UML
В книге «Чистая архитектура» автор предлагает паттерн архитектуры программного обеспечения, одним из которых являетсяПример. После прочтения этой книги мне все больше нравился авторский набор архитектурных паттернов, и постепенно я начал приводить типовые варианты использования требований в проектных документах — пусть и в текстовых описаниях. Позже я узнал, что уже есть своего рода графический метод, специально используемый для описания вариантов использования в UML — диаграмма вариантов использования.
Диаграмма вариантов использования по-прежнему используется для рисованияPlantUML. следующая картина
генерируется из следующего исходного кода
@startuml
left to right direction
actor 员工 as yg
actor 顾客 as gk
actor 餐厅员工 as ctyg
actor A2 as a2
actor 送餐员 as scy
rectangle cos {
note "没注册工资\n支付的采用\n送餐时收费" as mzc
usecase 查看菜单 as ckcd
usecase 注册 as zc
usecase 登录 as dl
usecase 订餐 as dc
usecase "预约/覆盖预约" as yy
usecase 备餐 as bc
usecase 请求送餐 as qqsc
usecase 记录送餐 as jlsc
usecase 打印送餐说明 as dyscsm
usecase 记录收费 as jlsf
zc .> dl : <<extends>>
dl .> dc : <<extends>>
}
actor A1 as a1
note bottom of a1 : 已注册工资支付
yg <|-- gk
gk <|-- ctyg
ctyg <|-- a2
ctyg <|-- scy
yg -- ckcd
yg ---- zc
yg --- dl
gk -- dc
gk ---- yy
ctyg -- bc
ctyg --- qqsc
scy -- jlsc
scy --- dyscsm
scy -- mzc
jlsf -- mzc
@enduml
К сожалению,PlantUMLРезультат автоматической верстки получается не таким аккуратным, а в левом нижнем углу есть очевидная треугольная пустая область — это тоже недостаток DSL Dafa, то есть конечным эффектом аранжировки невозможно идеально управлять.
Диаграмма классов UML
Когда я впервые столкнулся с UML, я узнал о диаграммах классов — хотя самое раннее знакомство, меньше всего рисование. По сравнению с диаграммами классов диаграммы ER рисуют немного больше.
Если вы хотите рисовать диаграммы классов, предпочтительным инструментом являетсяmermaid. а такжеPlantUMLТакой же,mermaidЭто также большая и всеобъемлющая вещь.Помимо рисования диаграмм классов UML, вы также можете рисовать блок-схемы, диаграммы последовательности и диаграммы состояний UML. Картинка ниже
являетсяmermaid-cliСгенерировано из следующего исходного кода
classDiagram
Image <|-- BMP
Image <|-- GIF
Image <|-- JPEG
Image: +setImpl()
Image: +parseFile()
ImageImpl <|-- WinImpl
ImageImpl <|-- LinuxImpl
ImageImpl: +doPaint()
Image ..> ImageImpl
Пользователи Emacs могут установитьmermaid-mode, пользователи VSCode могут использоватьMermaid PreviewЭтот плагин для помощи в редактированииmermaidисходный файл.
только что упомянулmermaid-cliэто программа командной строки дляmermaidИсходный файл создает изображения в формате PNG, и установка также очень проста.
npm install -g mermaid.cli
Суммировать
Есть также много графиков, которые можно нарисовать с помощью DSL, и заинтересованные читатели могут перейти кmermaidилиPlantUMLНа официальном сайте есть некоторое понимание, и я не буду приводить здесь примеры по одному.
Рисование с помощью DSL имеет некоторые преимущества:
- Нет необходимости использовать инструменты мыши, евангелие чистой партии клавиатуры;
- Исходный код представлен в виде обычного текста, генератор работает на нескольких платформах, и его можно редактировать и просматривать на нескольких платформах или даже на веб-страницах, не ограничиваясь одним производителем программного обеспечения;
- Его легко модифицировать, и нет необходимости корректировать положение каждой графики вперед и назад после модификации.
Но есть и некоторые недостатки:
- Он не интуитивно понятен, и трудно угадать окончательный эффект перед созданием изображения;
- Невозможно точно контролировать расположение и положение всех элементов на схеме, а иногда и не получить желаемого эффекта;
- Нужно изучить другой DSL, стоимость обучения выше, чем инструмент визуализации.
Точно так же, как не существует серебряной пули в разработке программного обеспечения, не существует панацеи для инструментов рисования, главное — выбрать наиболее подходящий инструмент для решения поставленной задачи в соответствии с местными условиями.