@slxu/graphsx 0.1.0 → 0.1.2

package/README.md

@@ -21,6 +21,13 @@ Install from npm:
 npm install @slxu/graphsx
 ```
 
+Optional integrations use the host app's packages:
+
+```bash
+npm install katex markdown-it
+npm install codemirror @codemirror/state @codemirror/view @codemirror/lang-javascript @codemirror/lang-markdown
+```
+
 ## What It Looks Like
 
 ### Port Diagram
@@ -41,7 +48,7 @@ npm install @slxu/graphsx
 </Graph>
 ```
 
-![GraphSX port diagram rendered as SVG](docs/assets/basic-graph.svg)
+![GraphSX port diagram rendered as SVG](https://raw.githubusercontent.com/slxuphys/graphsx/main/docs/assets/basic-graph.svg)
 
 ### Parametric Plot
 
@@ -61,7 +68,7 @@ npm install @slxu/graphsx
 </Plot>
 ```
 
-![GraphSX parametric heart curve rendered as SVG](docs/assets/plot-heart.svg)
+![GraphSX parametric heart curve rendered as SVG](https://raw.githubusercontent.com/slxuphys/graphsx/main/docs/assets/plot-heart.svg)
 
 ### Reusable Shapes And Repeat
 
@@ -84,7 +91,7 @@ npm install @slxu/graphsx
 </Graph>
 ```
 
-![GraphSX repeated tensor network rendered as SVG](docs/assets/tensor-repeat.svg)
+![GraphSX repeated tensor network rendered as SVG](https://raw.githubusercontent.com/slxuphys/graphsx/main/docs/assets/tensor-repeat.svg)
 
 ## Quick Example
 
@@ -564,6 +571,16 @@ new EditorView({
 
 When the cursor is outside a `graphsx` fence, the fence renders as an SVG widget. Clicking the widget moves the cursor into the original fenced code. `graphsx-defs` fences render as compact library markers and feed reusable shapes/styles to later fences.
 
+## VS Code Markdown Preview
+
+This repo also contains a VS Code extension scaffold in `packages/vscode-graphsx`. It teaches VS Code's built-in Markdown preview to render `graphsx` fenced blocks.
+
+Build the extension bundle from the repo root:
+
+```bash
+npm run build:vscode
+```
+
 ## Development
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slxu/graphsx",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A small React-like inline graph DSL parser and model builder.",
   "type": "module",
   "main": "src/index.js",
@@ -31,6 +31,7 @@
   "scripts": {
     "build": "vite build",
     "build:pages": "vite build --base=/graphsx/",
+    "build:vscode": "node scripts/build-vscode-extension.js",
     "dev": "vite --host 127.0.0.1",
     "generate:readme-assets": "node scripts/generate-readme-assets.js",
     "playground": "vite --host 127.0.0.1",
@@ -43,14 +44,27 @@
     "diagram"
   ],
   "license": "MIT",
-  "devDependencies": {
-    "vite": "^7.0.0"
+  "peerDependencies": {
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.43.1"
+  },
+  "peerDependenciesMeta": {
+    "@codemirror/state": {
+      "optional": true
+    },
+    "@codemirror/view": {
+      "optional": true
+    }
   },
-  "dependencies": {
+  "devDependencies": {
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.43.1",
     "codemirror": "^6.0.2",
+    "esbuild": "^0.27.7",
     "katex": "^0.17.0",
-    "markdown-it": "^14.2.0"
+    "markdown-it": "^14.2.0",
+    "vite": "^7.0.0"
   }
 }

package/src/renderer.js

@@ -163,6 +163,9 @@ function drawShape(context, node, offsetX, offsetY) {
       cx: node.transform ? node.x : node.x + offsetX,
       cy: node.transform ? node.y : node.y + offsetY,
       r,
+      fill: "#ffffff",
+      stroke: "#26312d",
+      "stroke-width": 2,
       ...(transform ? { transform } : {})
     });
   }
@@ -174,6 +177,9 @@ function drawShape(context, node, offsetX, offsetY) {
     width: Number(node.attrs.w ?? 100),
     height: Number(node.attrs.h ?? 60),
     rx: Number(node.attrs.corner ?? node.attrs.rx ?? 6),
+    fill: "#ffffff",
+    stroke: "#26312d",
+    "stroke-width": 2,
     ...(transform ? { transform } : {})
   });
 }
@@ -189,7 +195,10 @@ function drawGroupBox(context, node, offsetX, offsetY) {
     y: bounds.minY + offsetY - padding,
     width: Math.max(80, bounds.maxX - bounds.minX + padding * 2),
     height: Math.max(54, bounds.maxY - bounds.minY + padding * 2),
-    rx: 8
+    rx: 8,
+    fill: "rgba(45, 108, 223, 0.05)",
+    stroke: "rgba(45, 108, 223, 0.45)",
+    "stroke-dasharray": "6 5"
   }));
   appendMaybe(box, drawNodeLabel(context, node, offsetX, offsetY, {
     x: node.x,
@@ -217,7 +226,10 @@ function drawLeg(context, leg, offsetX, offsetY) {
     class: "leg-dot",
     cx: leg.x + offsetX,
     cy: leg.y + offsetY,
-    r: Number(leg.attrs.r ?? 5)
+    r: Number(leg.attrs.r ?? 5),
+    fill: "#16846f",
+    stroke: "#ffffff",
+    "stroke-width": 2
   }));
   if (leg.attrs.label != null) {
     group.append(drawLabel(context, leg.attrs.label, leg.x + offsetX + 10, leg.y + offsetY - 10, "leg-label", "start"));
@@ -228,6 +240,9 @@ function drawLeg(context, leg, offsetX, offsetY) {
 function drawEdge(context, edge, from, to, offsetX, offsetY) {
   return styledEl(context, "path", edge.attrs.style, {
     class: "edge",
+    fill: "none",
+    stroke: "#2d6cdf",
+    "stroke-width": 2.5,
     ...arrowMarkerAttrs(context, edge.attrs),
     d: edgePathData(edge, from, to, offsetX, offsetY, context)
   });
@@ -238,7 +253,7 @@ function drawPath(context, path, offsetX, offsetY) {
     class: "path",
     fill: "none",
     stroke: "#111111",
-    strokeWidth: 2,
+    "stroke-width": 2,
     ...arrowMarkerAttrs(context, path.attrs),
     d: explicitPathData(path, offsetX, offsetY)
   };