docs: update Soft/Notes/auto-note

Soft/Notes/auto-note.html

@@ -2,7 +2,7 @@
 title: Автоматизации написания документации
 description: 
 published: true
-date: 2023-11-15T16:22:07.682Z
+date: 2023-11-15T16:23:59.264Z
 tags: 
 editor: ckeditor
 dateCreated: 2023-11-15T16:22:07.682Z
@@ -13,46 +13,19 @@ dateCreated: 2023-11-15T16:22:07.682Z
 <p>Сегодня хочу рассказать про ещё один инструмент для автоматизации написания документации. А конкретно по её визуализации с помощью схем и диаграмм. Речь пойдёт про Mermaid. Это известный и популярный инструмент для создания визуализаций и диаграмм на основе написанного кода.</p>
 <p>Основная идея Mermaid в том, что вы пишите текст, а на выходе получаете визуализацию. Это позволяет решать целый спектр задач, таких как:<br>1. Автоматизация создания контента.<br>2. Совместная работа с контентом.<br>3. Простая и понятная схема сохранения истории изменений.</p>
 <p>Для понимания наглядный пример. Вот такой текст:</p>
-<figure class="table" style="height:auto;width:1468px;">
+<pre><code class="language-plaintext">graph TD;
-  <table style="background-color:rgb(255, 255, 255);border-bottom:0px;border-left:0px;border-right:0px;border-top:0px;">
+A--&gt;B;
-    <tbody>
+A--&gt;C;
-      <tr>
+B--&gt;D;
-        <td style="border-bottom:0px;border-left:0px;border-right:0px;border-top:0px;height:auto;padding:0px 0px 0px 15px;width:1453px;">
+C--&gt;D;</code></pre>
-          <p><code>graph TD;</code></p>
-          <p><code>A--&gt;B;</code></p>
-          <p><code>A--&gt;C;</code></p>
-          <p><code>B--&gt;D;</code></p>
-          <p><code>C--&gt;D;</code></p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</figure>
 <p>Превращается в картинку с блок схемой и стрелочками. Посмотрите остальные примеры на главной странице проекта (<a href="https://mermaid-js.github.io/">https://mermaid-js.github.io/</a>), чтобы сразу понять, какой это инструмент и что с его помощью можно нарисовать.</p>
 <p>С помощью Mermaid можно автоматизировать создание и изменение схем, редактируя текст после изменения структуры объектов. Автоматически будет меняться и картинка. История изменений отслеживается, всегда можно посмотреть прошлый вариант.</p>
 <p>Самый простой и наглядный пример, где это может пригодиться - описание взаимодействия микросервисов, прохождение пользовательских запросов. Это как раз решается на уровне рисования блок-схем со стрелочками. Наглядные примеры (<a href="https://www.kubernetes.dev/blog/2021/12/01/improve-your-documentation-with-mermaid.js-diagrams/">https://www.kubernetes.dev/blog/2021/12/01/improve-your-documentation-with-mermaid.js-diagrams/</a>) с официального блога kubernetes.</p>
 <p>На практике применение выглядит следующим образом. К примеру, github нативно поддерживает диаграммы Mermaid.js в README-файлах. Можно прямо в них писать код и он будет отрисовываться в картинки. Также Mermaid.js нативно интегрирована в GitLab, Gitea (<a href="https://t.me/srv_admin/1370">https://t.me/srv_admin/1370</a>), Joplin (<a href="https://t.me/srv_admin/1563">https://t.me/srv_admin/1563</a>) и Notion. Для многих сервисов есть плагины. А в общем случае это пакет для nodejs, который можно поставить локально через nmp, запускать как сервис и обращаться к нему или с помощью CLI прогонять через него текстовые данные:</p>
-<figure class="table" style="height:auto;width:1468px;">
+<pre><code class="language-plaintext">npm install -g mermaid
-  <table style="background-color:rgb(255, 255, 255);border-bottom:0px;border-left:0px;border-right:0px;border-top:0px;">
+npm install -g @mermaid-js/mermaid-cli
-    <tbody>
+mmdc -i scheme.mmd -o scheme.png -w 1024 -H 768</code></pre>
-      <tr>
-        <td style="border-bottom:0px;border-left:0px;border-right:0px;border-top:0px;height:auto;padding:0px 0px 0px 15px;width:1453px;">
-          <p><code>npm install</code> <code>-g mermaid</code></p>
-          <p><code>npm install</code> <code>-g @mermaid-js/mermaid-cli</code></p>
-          <p><code>mmdc -i scheme.mmd -o scheme.png -w 1024 -H 768</code></p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</figure>
 <p><br>Или с помощью Docker:</p>
-<figure class="table" style="height:auto;width:1468px;">
+<pre><code class="language-plaintext">docker run -it -v ~/diagrams:/data minlag/mermaid-cli -i /data/diagram.mmd</code></pre>
-  <table style="background-color:rgb(255, 255, 255);border-bottom:0px;border-left:0px;border-right:0px;border-top:0px;">
+<p>&nbsp;</p>
-    <tbody>
-      <tr>
-        <td style="border-bottom:0px;border-left:0px;border-right:0px;border-top:0px;height:auto;padding:0px 0px 0px 15px;width:1453px;"><code>docker run -it -v</code> <code>~/diagrams:/data</code> <code>minlag/mermaid-cli</code>&nbsp;<code>-i /data/diagram.mmd</code></td>
-      </tr>
-    </tbody>
-  </table>
-</figure>
 <p><br>&nbsp;</p>