Используйте Vite и Mermaid для динамического построения диаграмм.
Обзор
В этой статье давайте воспользуемся Vite и Mermaid для создания прототипа простого приложения для построения динамических диаграмм.
Vite - это инструмент сборки, который призван обеспечить более быструю и экономичную разработку современных веб-проектов. Вы можете использовать его с обычным Javascript / Typescript или вашими любимыми фреймворками, такими как React, Vue, Preact, LitElement или Svelte.
Mermaid - это инструмент для построения диаграмм и диаграмм на основе Javascript, который отображает текстовые определения, вдохновленные Markdown, для динамического создания и изменения диаграмм.
Использование текстового подхода для построения диаграмм дает несколько преимуществ.
- Теперь контролировать версии стало проще. Разработчик может легко отслеживать изменения, внесенные в диаграммы. Диаграммы теперь рассматриваются как часть репозитория исходного кода.
- С помощью такого инструмента, как "Русалка", я могу визуализировать диаграмму сразу после внесения изменений.
Настройка Vite
Давайте начнем с настройки Vite.
Я создаю ванильный проект Typescript под названием vite-mermaid, запустив yarn create vite.
❯ yarn create vite yarn create v1.22.11 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Installed "[email protected]" with binaries: - create-vite - cva ✔ Project name: … vite-mermaid ✔ Select a framework: › vanilla ✔ Select a variant: › vanilla-ts Scaffolding project in /home/alpha2phi/workspace/dev/alpha2phi/vite-mermaid/vite-mermaid... Done. Now run: cd vite-mermaid yarn yarn dev Done in 18.74s.
Запустите yarn install и yarn run dev, чтобы убедиться, что приложение работает.
❯ yarn install yarn install v1.22.11 warning package.json: No license field warning [email protected]: No license field [1/4] Resolving packages... success Already up-to-date. Done in 0.13s. ❯ yarn run dev
Настройка русалки
Теперь создайте папку с именем diagram и загрузите в нее диаграммы Русалочки.
Например. Я создаю несколько примеров диаграмм, как показано ниже.
Вот пример ER-диаграммы.
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
Теперь откройте index.html и добавьте код для рендеринга диаграмм русалок в виде изображений SVG.
Я включаю библиотеку Javascript Mermaid и инициализирую ее при загрузке приложения.
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
....
Я использую Javascript fetch API для чтения диаграмм Mermaid с сервера и вызываю Mermaid API для визуализации диаграмм в формате SVG.
<script>
function showGraph(name, id) {
fetch("/diagrams/" + name)
.then((response) => response.text())
.then((data) => {
var svg = mermaid.render("svg_" + id, data);
var elem = document.getElementById(id);
elem.innerHTML = svg;
});
}
document.addEventListener("DOMContentLoaded", function (event) {
showGraph("flowchart.mmd", "g1");
showGraph("sequence_diagram.mmd", "g2");
showGraph("user_journey.mmd", "g3");
showGraph("er.mmd", "g4");
});
</script>
Резюме
В этой статье я использую только API-интерфейсы Mermaid Javascript для визуализации диаграмм. Есть несколько способов развернуть Mermaid в соответствии с вашими требованиями.
Текстовые схемы при написании технической документации можно найти в этой статье.
Исходный код этого приложения можно найти в этом репозитории.
Если вы еще не являетесь участником Medium и хотите им стать, нажмите здесь. (Часть вашей абонентской платы будет использована для поддержки alpha2phi.)
