@ktrysmt/beautiful-mermaid 1.4.3 → 1.4.4

package/README.md

@@ -1,6 +1,6 @@
 <div align="center">
 
-# beautiful-mermaid
+# @ktrysmt/beautiful-mermaid
 
 **Render Mermaid diagrams as beautiful SVGs or ASCII art**
 
@@ -8,32 +8,23 @@ Ultra-fast, fully themeable, zero DOM dependencies. Built for the AI era.
 
 ![beautiful-mermaid sequence diagram example](hero.png)
 
-[![npm version](https://img.shields.io/npm/v/beautiful-mermaid.svg)](https://www.npmjs.com/package/beautiful-mermaid)
+[![npm version](https://img.shields.io/npm/v/@ktrysmt/beautiful-mermaid.svg)](https://www.npmjs.com/package/@ktrysmt/beautiful-mermaid)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 
-[**Live Demo & Samples**](https://agents.craft.do/mermaid)
-
-**[→ Use it live in Craft Agents](https://agents.craft.do)**
-
 </div>
 
 ---
 
-## Why We Built This
-
-Diagrams are essential for AI-assisted programming. When you're working with an AI coding assistant, being able to visualize data flows, state machines, and system architecture—directly in your terminal or chat interface—makes complex concepts instantly graspable.
-
-[Mermaid](https://mermaid.js.org/) is the de facto standard for text-based diagrams. It's brilliant. But the default renderer has problems:
-
-- **Aesthetics** — Might be personal preference, but wished they looked more professional
-- **Complex theming** — Customizing colors requires wrestling with CSS classes
-- **No terminal output** — Can't render to ASCII for CLI tools
-- **Heavy dependencies** — Pulls in a lot of code for simple diagrams
+## About This Fork
 
-We built `beautiful-mermaid` at [Craft](https://craft.do) to power diagrams in [Craft Agents](https://agents.craft.do). It's fast, beautiful, and works everywhere—from rich UIs to plain terminals.
+This is a fork of [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid), originally built by the team at [Craft](https://craft.do). This fork is independently maintained by [@ktrysmt](https://github.com/ktrysmt) with additional bug fixes and improvements including:
 
+- CJK/Unicode label support for subgraphs
+- Subgraph layout fixes (vertical stacking, containment, label width)
+- Edge routing improvements
+- Scoped npm package (`@ktrysmt/beautiful-mermaid`)
 
-The ASCII rendering engine is based on [mermaid-ascii](https://github.com/AlexanderGrooff/mermaid-ascii) by Alexander Grooff. We ported it from Go to TypeScript and extended it. Thank you Alexander for the excellent foundation! (And inspiration that this was possible.)
+The ASCII rendering engine is based on [mermaid-ascii](https://github.com/AlexanderGrooff/mermaid-ascii) by Alexander Grooff, ported from Go to TypeScript. Thank you Alexander for the excellent foundation!
 
 ## Features
 
@@ -50,11 +41,11 @@ The ASCII rendering engine is based on [mermaid-ascii](https://github.com/Alexan
 ## Installation
 
 ```bash
-npm install beautiful-mermaid
+npm install @ktrysmt/beautiful-mermaid
 # or
-bun add beautiful-mermaid
+bun add @ktrysmt/beautiful-mermaid
 # or
-pnpm add beautiful-mermaid
+pnpm add @ktrysmt/beautiful-mermaid
 ```
 
 ## Quick Start
@@ -62,7 +53,7 @@ pnpm add beautiful-mermaid
 ### SVG Output
 
 ```typescript
-import { renderMermaidSVG } from 'beautiful-mermaid'
+import { renderMermaidSVG } from '@ktrysmt/beautiful-mermaid'
 
 const svg = renderMermaidSVG(`
   graph TD
@@ -79,7 +70,7 @@ Need async? Use `renderMermaidSVGAsync()` — same output, returns a `Promise<st
 ### ASCII Output
 
 ```typescript
-import { renderMermaidASCII } from 'beautiful-mermaid'
+import { renderMermaidASCII } from '@ktrysmt/beautiful-mermaid'
 
 const ascii = renderMermaidASCII(`graph LR; A --> B --> C`)
 ```
@@ -99,7 +90,7 @@ const ascii = renderMermaidASCII(`graph LR; A --> B --> C`)
 Because rendering is synchronous, you can use `useMemo()` for zero-flash diagram rendering:
 
 ```tsx
-import { renderMermaidSVG } from 'beautiful-mermaid'
+import { renderMermaidSVG } from '@ktrysmt/beautiful-mermaid'
 
 function MermaidDiagram({ code }: { code: string }) {
   const { svg, error } = React.useMemo(() => {
@@ -224,7 +215,7 @@ const svg = renderMermaidSVG(diagram, {
 | `one-dark` | Dark | `#282c34` | `#c678dd` |
 
 ```typescript
-import { renderMermaidSVG, THEMES } from 'beautiful-mermaid'
+import { renderMermaidSVG, THEMES } from '@ktrysmt/beautiful-mermaid'
 
 const svg = renderMermaidSVG(diagram, THEMES['tokyo-night'])
 ```
@@ -259,7 +250,7 @@ Use **any VS Code theme** directly via Shiki integration. This gives you access
 
 ```typescript
 import { getSingletonHighlighter } from 'shiki'
-import { renderMermaidSVG, fromShikiTheme } from 'beautiful-mermaid'
+import { renderMermaidSVG, fromShikiTheme } from '@ktrysmt/beautiful-mermaid'
 
 // Load any theme from Shiki's registry
 const highlighter = await getSingletonHighlighter({
@@ -437,7 +428,7 @@ The chart renderer follows a clean, minimal design philosophy inspired by Apple
 For terminal environments, CLI tools, or anywhere you need plain text, render to ASCII or Unicode box-drawing characters:
 
 ```typescript
-import { renderMermaidASCII } from 'beautiful-mermaid'
+import { renderMermaidASCII } from '@ktrysmt/beautiful-mermaid'
 
 // Unicode mode (default) — prettier box drawing
 const unicode = renderMermaidASCII(`graph LR; A --> B`)
@@ -580,6 +571,6 @@ MIT — see [LICENSE](LICENSE) for details.
 
 <div align="center">
 
-Built with care by the team at [Craft](https://craft.do)
+Originally built by the team at [Craft](https://craft.do). Fork maintained by [@ktrysmt](https://github.com/ktrysmt).
 
 </div>

package/dist/index.js

@@ -2927,8 +2927,9 @@ function drawArrow(graph, edge) {
     return [empty, empty, empty, empty, empty, empty];
   }
   const labelCanvas = drawArrowLabel(graph, edge);
-  const [pathCanvas, linesDrawn, lineDirs] = drawPath(graph, edge.path, edge.style);
-  const boxStartCanvas = drawBoxStart(graph, edge.path, linesDrawn[0], edge.from.shape);
+  const endCoordOverride = computeEndCoordOverride(graph, edge);
+  const [pathCanvas, linesDrawn, lineDirs] = drawPath(graph, edge.path, edge.style, void 0, endCoordOverride);
+  const boxStartCanvas = drawBoxStart(graph, edge.path, linesDrawn[0], edge.from);
   let arrowHeadEndCanvas;
   if (edge.hasArrowEnd) {
     arrowHeadEndCanvas = drawArrowHead(
@@ -2957,6 +2958,38 @@ function drawArrow(graph, edge) {
   const cornersCanvas = drawCorners(graph, edge.path);
   return [pathCanvas, boxStartCanvas, arrowHeadEndCanvas, arrowHeadStartCanvas, cornersCanvas, labelCanvas];
 }
+function computeEndCoordOverride(graph, edge) {
+  if (edge.path.length < 2) return void 0;
+  const lastPathCoord = edge.path[edge.path.length - 1];
+  const prevPathCoord = edge.path[edge.path.length - 2];
+  const dir = determineDirection(prevPathCoord, lastPathCoord);
+  const defaultDC = gridToDrawingCoord(graph, lastPathCoord);
+  const targetDC = edge.to.drawingCoord;
+  const targetGC = edge.to.gridCoord;
+  if (!targetDC || !targetGC) return void 0;
+  let boxW = 0;
+  for (let i = 0; i < 2; i++) boxW += graph.columnWidth.get(targetGC.x + i) ?? 0;
+  let boxH = 0;
+  for (let i = 0; i < 2; i++) boxH += graph.rowHeight.get(targetGC.y + i) ?? 0;
+  if (dirEquals(dir, Left)) {
+    const borderX = targetDC.x + boxW;
+    if (borderX === defaultDC.x) return void 0;
+    return { x: borderX, y: defaultDC.y };
+  } else if (dirEquals(dir, Right)) {
+    const borderX = targetDC.x;
+    if (borderX === defaultDC.x) return void 0;
+    return { x: borderX, y: defaultDC.y };
+  } else if (dirEquals(dir, Up)) {
+    const borderY = targetDC.y + boxH;
+    if (borderY === defaultDC.y) return void 0;
+    return { x: defaultDC.x, y: borderY };
+  } else if (dirEquals(dir, Down)) {
+    const borderY = targetDC.y;
+    if (borderY === defaultDC.y) return void 0;
+    return { x: defaultDC.x, y: borderY };
+  }
+  return void 0;
+}
 function reverseDirection(dir) {
   if (dirEquals(dir, Up)) return Down;
   if (dirEquals(dir, Down)) return Up;
@@ -2968,15 +3001,16 @@ function reverseDirection(dir) {
   if (dirEquals(dir, LowerRight)) return UpperLeft;
   return Middle;
 }
-function drawPath(graph, path, style = "solid") {
+function drawPath(graph, path, style = "solid", startCoordOverride, endCoordOverride) {
   const canvas = copyCanvas(graph.canvas);
   let previousCoord = path[0];
   const linesDrawn = [];
   const lineDirs = [];
+  const lastIdx = path.length - 1;
   for (let i = 1; i < path.length; i++) {
     const nextCoord = path[i];
-    const prevDC = gridToDrawingCoord(graph, previousCoord);
-    const nextDC = gridToDrawingCoord(graph, nextCoord);
+    const prevDC = i === 1 && startCoordOverride ? startCoordOverride : gridToDrawingCoord(graph, previousCoord);
+    const nextDC = i === lastIdx && endCoordOverride ? endCoordOverride : gridToDrawingCoord(graph, nextCoord);
     if (drawingCoordEquals(prevDC, nextDC)) {
       previousCoord = nextCoord;
       continue;
@@ -2990,18 +3024,45 @@ function drawPath(graph, path, style = "solid") {
   }
   return [canvas, linesDrawn, lineDirs];
 }
-function drawBoxStart(graph, path, firstLine, sourceShape) {
+function drawBoxStart(graph, path, firstLine, sourceNode) {
   const canvas = copyCanvas(graph.canvas);
   if (graph.config.useAscii) return canvas;
-  if (sourceShape === "state-start" || sourceShape === "state-end") {
+  if (sourceNode.shape === "state-start" || sourceNode.shape === "state-end") {
     return canvas;
   }
   const from = firstLine[0];
   const dir = determineDirection(path[0], path[1]);
-  if (dirEquals(dir, Up)) canvas[from.x][from.y + 1] = "\u2534";
-  else if (dirEquals(dir, Down)) canvas[from.x][from.y - 1] = "\u252C";
-  else if (dirEquals(dir, Left)) canvas[from.x + 1][from.y] = "\u2524";
-  else if (dirEquals(dir, Right)) canvas[from.x - 1][from.y] = "\u251C";
+  const dc = sourceNode.drawingCoord;
+  const gc = sourceNode.gridCoord;
+  if (dirEquals(dir, Right)) {
+    let boxW = 0;
+    for (let i = 0; i < 2; i++) boxW += graph.columnWidth.get(gc.x + i) ?? 0;
+    const borderX = dc.x + boxW;
+    canvas[borderX][from.y] = "\u251C";
+    for (let x = borderX + 1; x < from.x; x++) {
+      canvas[x][from.y] = "\u2500";
+    }
+  } else if (dirEquals(dir, Left)) {
+    const borderX = dc.x;
+    canvas[borderX][from.y] = "\u2524";
+    for (let x = from.x + 1; x < borderX; x++) {
+      canvas[x][from.y] = "\u2500";
+    }
+  } else if (dirEquals(dir, Down)) {
+    let boxH = 0;
+    for (let i = 0; i < 2; i++) boxH += graph.rowHeight.get(gc.y + i) ?? 0;
+    const borderY = dc.y + boxH;
+    canvas[from.x][borderY] = "\u252C";
+    for (let y = borderY + 1; y < from.y; y++) {
+      canvas[from.x][y] = "\u2502";
+    }
+  } else if (dirEquals(dir, Up)) {
+    const borderY = dc.y;
+    canvas[from.x][borderY] = "\u2534";
+    for (let y = from.y + 1; y < borderY; y++) {
+      canvas[from.x][y] = "\u2502";
+    }
+  }
   return canvas;
 }
 function drawArrowHead(graph, lastLine, fallbackDir) {