tmp

README.md

@@ -66,8 +66,10 @@ Ideas for other diagrams: https://stereobooster.com/posts/text-to-diagram/.
 
 ## TODO
 
+- [ ] implement dark mode for mermaid with picture/classes
+- [ ] SVGO?
 - [ ] fix `@beoe/astro-graphviz`
-  - why I can't use `cache` package?
+  - why I can't use `@beoe/cache` package?
 - [ ] example of gnuplot custom diagram
   - any diagram which expects `input.dat`, for example https://gnuplot.sourceforge.net/demo_svg_5.4/histograms.html
   - maybe do it like [asciidoctor does for penrose](https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/penrose/)?

packages/demo/astro.config.mjs

@@ -32,7 +32,10 @@ export default defineConfig({
   markdown: {
     rehypePlugins: [
       [rehypeGraphviz, { class: className }],
-      [rehypeMermaid, { cache, class: className }],
+      [
+        rehypeMermaid,
+        { cache, class: className, strategy: "class-dark-mode" },
+      ],
       [rehypeGnuplot, { cache, class: className }],
     ],
   },

packages/demo/src/content/docs/examples/graphviz.mdx

@@ -30,6 +30,78 @@ digraph finite_state_machine {
 }
 ```
 
+```dot 
+graph grid {
+	bgcolor="transparent";
+	label="grid"
+	labelloc = "t"
+	node [shape=plaintext]
+	// arbitrary path on rigid grid
+	A0 -- B1 -- C2 -- D3 -- E4 -- F5 -- G6 -- H7
+	H0 -- G1 -- F2 -- E3 -- D4 -- C5 -- B6 -- A7
+
+	edge [weight=1000 style=dashed color=dimgrey]
+
+	// uncomment to hide the grid
+	//edge [style=invis]
+
+	A0 -- A1 -- A2 -- A3 -- A4 -- A5 -- A6 -- A7
+	B0 -- B1 -- B2 -- B3 -- B4 -- B5 -- B6 -- B7
+	C0 -- C1 -- C2 -- C3 -- C4 -- C5 -- C6 -- C7
+	D0 -- D1 -- D2 -- D3 -- D4 -- D5 -- D6 -- D7
+	E0 -- E1 -- E2 -- E3 -- E4 -- E5 -- E6 -- E7
+	F0 -- F1 -- F2 -- F3 -- F4 -- F5 -- F6 -- F7
+	G0 -- G1 -- G2 -- G3 -- G4 -- G5 -- G6 -- G7
+	H0 -- H1 -- H2 -- H3 -- H4 -- H5 -- H6 -- H7
+
+	rank=same {A0 -- B0 -- C0 -- D0 -- E0 -- F0 -- G0 -- H0}
+	rank=same {A1 -- B1 -- C1 -- D1 -- E1 -- F1 -- G1 -- H1}
+	rank=same {A2 -- B2 -- C2 -- D2 -- E2 -- F2 -- G2 -- H2}
+	rank=same {A3 -- B3 -- C3 -- D3 -- E3 -- F3 -- G3 -- H3}
+	rank=same {A4 -- B4 -- C4 -- D4 -- E4 -- F4 -- G4 -- H4}
+	rank=same {A5 -- B5 -- C5 -- D5 -- E5 -- F5 -- G5 -- H5}
+	rank=same {A6 -- B6 -- C6 -- D6 -- E6 -- F6 -- G6 -- H6}
+	rank=same {A7 -- B7 -- C7 -- D7 -- E7 -- F7 -- G7 -- H7}
+}
+```
+
+```dot
+digraph {
+  bgcolor="transparent";
+  graph [rankdir=LR];
+  node [shape=record];
+  0 [label="0 | [• S, $]\n[S → • a S b, $]\n[S → •, $]"];
+  1 [label="1 | [S •, $]"];
+  2 [label="2 | [S → a • S b, $]\n[S → • a S b, b]\n[S → •, b]"];
+  3 [label="3 | [S → a S • b, $]"];
+  4 [label="4 | [S → a • S b, b]\n[S → • a S b, b]\n[S → •, b]"];
+  5 [label="5 | [S → a S b •, $]"];
+  6 [label="6 | [S → a S • b, b]"];
+  7 [label="7 | [S → a S b •, b]"];
+  0 -> 1 [label=S];
+  0 -> 2 [label=a];
+  2 -> 3 [label=S];
+  2 -> 4 [label=a];
+  3 -> 5 [label=b];
+  4 -> 6 [label=S];
+  4 -> 4 [label=a];
+  6 -> 7 [label=b];
+}
+```
+
+```dot
+graph {
+	layout=patchwork
+	node [style=filled]
+	"$2"  [area=200 fillcolor=gold]
+	"$1"  [area=100 fillcolor=gold]
+	"50c" [area= 50 fillcolor=silver]
+	"20c" [area= 20 fillcolor=silver]
+	"10c" [area= 10 fillcolor=silver]
+	"5c"  [area=  5 fillcolor=silver]
+}
+```
+
 ## astro-component
 
 import { Graphviz } from "@beoe/astro-graphviz";

packages/demo/src/content/docs/examples/mermaid.md

@@ -93,6 +93,8 @@ classDiagram
     }
 ```
 
+**TODO**: this doesn't work with dark mode
+
 ```mermaid
 ---
 title: Simple sample
@@ -199,6 +201,8 @@ gitGraph
    commit
 ```
 
+**TODO**: this doesn't work with dark mode
+
 ```mermaid
 C4Context
     title System Context diagram for Internet Banking System

packages/demo/src/styles/custom.css

@@ -18,11 +18,10 @@
   }
 }
 
-.mermaid svg {
-  background: #fff;
-  line-height: 1;
+html[data-theme="light"] .beoe-dark {
+  display: none;
 }
 
-.beoe {
-  @apply not-content;
+html[data-theme="dark"] .beoe-light {
+  display: none;
 }

packages/rehype-graphviz/src/index.ts

@@ -3,12 +3,32 @@ import type { Root } from "hast";
 import { processGraphvizSvg } from "./graphviz.js";
 import { rehypeCodeHook, type MapLike } from "@beoe/rehype-code-hook";
 
-export type RenderGraphvizOptions = { code: string; class?: string };
+// import { type Engine } from "@hpcc-js/wasm";
+type Engine =
+  | "circo"
+  | "dot"
+  | "fdp"
+  | "sfdp"
+  | "neato"
+  | "osage"
+  | "patchwork"
+  | "twopi"
+  | "nop"
+  | "nop2";
+export type RenderGraphvizOptions = {
+  code: string;
+  class?: string;
+  /* it is possible to change layout with in dot file itself */
+  engine?: Engine;
+};
 
 import { Graphviz } from "@hpcc-js/wasm";
 const graphviz = await Graphviz.load();
 export const renderGraphviz = (o: RenderGraphvizOptions) =>
-  processGraphvizSvg(graphviz.dot(o.code), o.class);
+  processGraphvizSvg(
+    graphviz.layout(o.code, "svg", o.engine || "dot"),
+    o.class
+  );
 
 // import { waitFor } from "@beoe/rehype-code-hook";
 /**
@@ -36,7 +56,7 @@ export type RehypeGraphvizConfig = {
 export const rehypeGraphviz: Plugin<[RehypeGraphvizConfig?], Root> = (
   options = {}
 ) => {
-  const salt = {  class: options.class };
+  const salt = { class: options.class };
   // @ts-expect-error
   return rehypeCodeHook({
     ...options,

packages/rehype-mermaid/package.json

@@ -33,13 +33,16 @@
   },
   "dependencies": {
     "@beoe/rehype-code-hook": "workspace:*",
-    "mermaid-isomorphic": "^2.1.2"
+    "hastscript": "^9.0.0",
+    "mermaid-isomorphic": "^2.1.2",
+    "mini-svg-data-uri": "^1.4.4",
+    "svgo": "^3.2.0"
   },
   "devDependencies": {
     "@types/hast": "^3.0.4",
-    "unified": "^11.0.4",
     "rehype-stringify": "^10.0.0",
     "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.1.0"
+    "remark-rehype": "^11.1.0",
+    "unified": "^11.0.4"
   }
 }