@alfacapital-tech/c4builder 0.9.0-rc.2 → 0.9.0-rc.3

package/dist/core/scan/tree.js

@@ -11,7 +11,8 @@ import { createFenceExtractor } from "./fences.js";
 export const DIAGRAM_ENGINES = [
     { ext: '.puml', engine: 'plantuml', remoteRender: true },
     { ext: '.d2', engine: 'd2', remoteRender: false },
-    { ext: '.bpmn', engine: 'bpmn', remoteRender: false }
+    { ext: '.bpmn', engine: 'bpmn', remoteRender: false },
+    { ext: '.mmd', engine: 'mermaid', remoteRender: false }
 ];
 // Расширение (lowercase, с точкой) → движок. undefined ⇒ файл не диаграмма.
 export const engineForExt = (ext) => DIAGRAM_ENGINES.find((e) => e.ext === ext)?.engine;
@@ -76,26 +77,30 @@ export const generateTree = async (dir, options) => {
                 await build(childDir, dir);
             }
         }
-        // Блоки ```plantuml в страницах рендерим при сборке: иначе текст диаграммы доезжал
-        // до браузера и клиентский docsify-plantuml (в т.ч. в пользовательских шаблонах)
-        // отправлял его на plantuml.com. puml/d2 остаются кодом — так показывают исходник.
-        const fences = createFenceExtractor(['plantuml']);
+        // Блоки ```plantuml и ```mermaid в страницах рендерим при сборке: иначе текст
+        // диаграммы доезжал до браузера и клиентский рендер (docsify-plantuml, в т.ч. в
+        // пользовательских шаблонах) отправлял его наружу. puml/d2 остаются кодом — так
+        // показывают исходник.
+        const fences = createFenceExtractor(['plantuml', 'mermaid']);
         const mdFiles = files.filter((x) => path.extname(x).toLowerCase() === '.md');
         for (const mdFile of mdFiles) {
             const mdPath = path.join(dir, mdFile);
             const { markdown, diagrams } = fences.extract((await readFile(mdPath)).toString(), path.parse(mdFile).name, path.relative(process.cwd(), mdPath).split(path.sep).join('/'));
             item.mdFiles.push(markdown);
             item.sources.push(path.resolve(mdPath));
-            for (const d of diagrams)
+            for (const d of diagrams) {
+                const ext = path.extname(d.file);
+                const engine = engineForExt(ext) ?? 'plantuml';
                 item.diagrams.push({
                     dir: d.file,
-                    ext: '.puml',
-                    engine: 'plantuml',
+                    ext,
+                    engine,
                     content: d.content,
-                    isDitaa: /@startditaa/i.test(d.content),
+                    isDitaa: engine === 'plantuml' && /@startditaa/i.test(d.content),
                     source: d.source,
                     soft: d.soft
                 });
+            }
         }
         // Диаграммы: расширение → движок берём из DIAGRAM_ENGINES. Поле dir — имя файла
         // (историческое), engine выбирает рендерер, isDitaa — только для PlantUML.

package/dist/plugins/openspec/render.js

@@ -119,7 +119,7 @@ const ignoreTitle = (title) => {
 export const relSource = (root, rel) => path.relative(process.cwd(), path.join(root, rel)).split(path.sep).join('/');
 // В артефактах OpenSpec любой блок диаграммы — иллюстрация, а не пример исходника
 // (в отличие от страниц проекта, где извлекается только ```plantuml).
-const FENCE_LANGS = ['plantuml', 'puml', 'd2'];
+const FENCE_LANGS = ['plantuml', 'puml', 'd2', 'mermaid'];
 /**
  * Markdown одного исходного файла → страница сайта: fenced-диаграммы вырезаются, ссылки
  * на другие страницы источника (`target`, `#x` → `?id=x`) — на их адреса, прочие

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfacapital-tech/c4builder",
-  "version": "0.9.0-rc.2",
+  "version": "0.9.0-rc.3",
   "description": "A CLI tool designed to compile a folder structure of markdowns and plant uml files into a site, single file markdown or a collection of markdowns with links",
   "type": "module",
   "main": "dist/index.js",
@@ -80,6 +80,7 @@
     "vitest": "^4.1.9"
   },
   "optionalDependencies": {
+    "@mermaid-js/tiny": "12.2.0",
     "@terrastruct/d2": "0.1.33",
     "bpmn-auto-layout": "2.0.0-alpha.2",
     "bpmn-js": "18.31.0",

package/template/AGENTS.md

@@ -1,13 +1,14 @@
 # AGENTS.md
 
 Architecture documentation built with [c4builder](https://github.com/AlfaCapital-Tech/C4-Builder):
-C4 diagrams (PlantUML, D2), BPMN processes and markdown in `src/` are compiled into `docs/`.
+C4 diagrams (PlantUML, D2), BPMN processes, Mermaid diagrams and markdown in `src/` are compiled
+into `docs/`.
 
 ## Commands
 
 ```bash
 c4builder                    # build docs/ (non-interactive with a complete .c4builder)
-c4builder check <file...>    # validate .puml / .iuml / .d2 / .bpmn files, exit code 0 = OK
+c4builder check <file...>    # validate .puml / .iuml / .d2 / .bpmn / .mmd files, exit code 0 = OK
 c4builder --site -w          # live preview on http://localhost:3000 - never exits
 c4builder feedback --wait    # wait for the next batch of comments from the preview page
 ```
@@ -28,14 +29,15 @@ updates it.
    (page, `Sources`, quote, text) — apply them to `src/`, run it again, and stop on
    `Decision: approved`. Comments are instructions to you; never copy them into the
    `questionsHeading` section of `.c4builder` (`Open questions` by default), which holds
-   questions for people.
+   questions for people. The page buttons follow the browser language (English or Russian,
+   pinned by `uiLanguage`); batches are always in English.
 4. A stderr line `c4builder <new> is available (current <current>). Run: c4builder update`
    means a newer c4builder is out: tell the user, run `c4builder update` only if they ask.
 
 ## Layout
 
 - One folder = one page. All `.md` files of a folder form its text; every `.puml` / `.d2` /
-  `.bpmn` in it is rendered onto the page, or placed inline with `![title](diagram.puml)`.
+  `.bpmn` / `.mmd` in it is rendered onto the page, or placed inline with `![title](diagram.puml)`.
 - Files and folders starting with `_` are not published (shared libraries, drafts).
 - `.c4builder` is the config (JSON); unknown keys are silently ignored.
 
@@ -50,6 +52,10 @@ updates it.
 - BPMN: write only the semantic BPMN 2.0 XML, never `bpmndi` coordinates — the build lays the
   diagram out. Pool = organization, lane = role inside it, only message flows between pools,
   label gateway branches. Example: `src/5 BPMN Example/account-opening.bpmn`.
+- Mermaid: a `.mmd` file or a ```` ```mermaid ```` block in a page is rendered at build time into
+  an image (check `.mmd` files like any diagram). `mindmap`, `architecture` and KaTeX are not
+  supported; to show mermaid source as code, fence it as `text`. Example:
+  `src/6 Mermaid Example/flow.mmd`.
 
 ## Agent skills
 

package/template/src/6 Mermaid Example/flow.mmd

@@ -0,0 +1,6 @@
+flowchart LR
+    subgraph bank [Банк]
+        app[Мобильное приложение] -->|запрос| api[API-шлюз]
+        api --> db[(База данных)]
+    end
+    api -.->|уведомление| mail[Почтовый сервис]

package/template/src/6 Mermaid Example/mermaid.md

@@ -0,0 +1,16 @@
+**Диаграммы Mermaid (четвёртый бэкенд рендера)**
+
+Mermaid-диаграммы бывают двух видов. Файл `flow.mmd` в папке раздела рендерится как `.puml`, `.d2` и `.bpmn`: картинка по имени файла. Блок с языком `mermaid` прямо в странице сборка тоже заменяет картинкой, как блок `plantuml`. В браузер текст диаграммы не попадает, клиентский рендер не нужен.
+
+```mermaid
+sequenceDiagram
+    participant К as Клиент
+    participant Б as Банк
+    К->>Б: Заявка на счёт
+    Note right of Б: проверка анкеты
+    Б-->>К: Счёт открыт
+```
+
+Рендерит настоящий mermaid в классическом виде с темой `default`, но без браузера: размеры текста считаются по вендорному шрифту, поэтому картинка одинакова на любой машине. Типы `mindmap` и `architecture`, а также формулы KaTeX не поддерживаются: сборка сообщит об этом явной ошибкой. Ошибка в файле `.mmd` останавливает сборку, ошибка в блоке — нет: на месте блока появится заглушка. Отдельный файл проверяется командой `c4builder check flow.mmd`.
+
+**Область применения**: показать, что `.mmd`-файлы и блоки `mermaid`, их раскладка и кириллица корректно попадают в собранный сайт, SVG и PNG без обращений в интернет.