292просмотров
10 февраля 2024 г.
Score: 321
🧜‍♀️ Открыл для себя потрясающий инструмент для рисования диаграмм и графиков – Mermaid: https://mermaid.js.org/ Отличие от какого-нибудь draw io в том, что Mermaid предоставляет некоторый синтаксис для разных видов диаграмм, которым ты описываешь схему, а дальше рисунок генерируется за тебя. Например, сиквенс диаграмму со схемой работы OAuth 2 можно описать так: sequenceDiagram participant Client as Client<br/>(Browser) participant App as Application Server participant Auth as OAuth Provider Note over Client: Unauthenticated Client->>App: Request Page App->>Client: Redirect to Login Page Client->>Auth: Request Login Page Auth->>Client: Login Page Client->>Auth: Submit Credentials Auth->>Auth: Verify Credentials Auth->>Client: Redirect to App with Auth Code Client->>App: Request App with Auth Code App->>Auth: Request Token for Client Note over App, Auth: Request includes:<br/>App ID, App Secret, Auth Code Auth->>Auth: Verify App ID + Secret, Auth code Auth->>App: Token for Client App->>Client: Token Note over Client: Authenticated Client->>App: Request Page with token App->>App: Verify Token App->>Client: Return Page Выложил Gist с кодом двух диаграмм: со схемой работы OAuth из примера выше и со схемой работы с репозиторием по Gitflow. Там же можно посмотреть рисунки, которые генерирует Mermaid. Генерация происходит налету. Поддерживается множество видов схем (см. документацию). Бесплатный. Опенсорсный. Есть онлайн редактор (правда, со странноватым дизайном). Поддержка Mermaid есть в Github для markdown файлов. Есть плагин для Obsidian. Так как диаграммы представлены текстом, то они легко правятся/дополняются без необходимости сдвигать/выравнивать множество элементов на рисунке вручную. Вдобавок эти изменения хорошо отслеживаются через diff, а не через метод пристального вглядывания в две версии рисунка. Например, диаграмму по Gitflow я сделал в двух версиях: сначала без примера bugfix бранча, а затем с ним. Для внесения этого изменения потребовалось заменить строку commit id: "fix bug 2" на branch bugfix/bug-2 order: 4 commit id: "fix bug 2" checkout release/0.2 merge bugfix/bug-2 id: "merge fix" и подправить ордеринг для feature веток. Это заняло не больше двух минут. В случае с каким-нибудь Visio или draw io я бы потратил гораздо больше времени и нервов 🙂
292
просмотров
2449
символов
Да
эмодзи
Нет
медиа

Другие посты @SystemOutBlog

Все посты канала →
🧜‍♀️ Открыл для себя потрясающий инструмент для рисования д — @SystemOutBlog | PostSniper