TGViewer
Веб-страница Веб-страница @tproger_web · 22.3K subscribers
Post #6594 884
Диаграмму Mermaid можно положить прямо в HTML

Для схемы запросов или графа зависимостей часто хватает нескольких строк Mermaid. Компонент `<mermaid-element>` позволяет поместить этот текст в HTML: подключаете модуль, добавляете тег и записываете внутри описание диаграммы.

По умолчанию компонент загружает Mermaid через jsDelivr по требованию и рисует схему в Shadow DOM. Несколько диаграмм на странице используют одну загрузку библиотеки. Через атрибут mermaid можно закрепить версию или указать собственный адрес.

Если Mermaid уже входит в сборку приложения, свою копию можно передать через MermaidElement.defaultMermaid. Тогда дополнительный запрос к CDN не понадобится. В статье есть песочница, где можно собрать пример и сразу скопировать получившийся HTML.
  • 🔥 3
More from @tproger_web
  1. Oct 10, 2026Почему сотни маленьких JS-чанков тоже могут замедлять сайт Один большой бандл заставляет к…
  2. Oct 10, 2026Как добавить в поиск фильтры вида author: и year: В поиске GitHub обычный текст соседствуе…
  3. Oct 9, 2026Post #6592
  4. Oct 9, 2026От чатбота к агентам: опыт Митчелла Хашимото Для работы с кодом Хашимото перешёл от отдель…
  5. Oct 9, 2026Как убрать dist из опубликованного npm-пакета Папка dist удобна для сборки, но её название…
  6. Oct 9, 2026Давайте сыграем в айтишную каламбурю! Правила простые: берём любой термин, название компан…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →