@diagrammo/dgmo 0.1.0 → 0.1.2

package/README.md

@@ -6,12 +6,53 @@ Write simple, readable `.dgmo` text files and render them as charts, diagrams, a
 
 ## Install
 
+### As a library
+
 ```bash
 npm install @diagrammo/dgmo
 # or
 pnpm add @diagrammo/dgmo
 ```
 
+### As a CLI
+
+```bash
+# via Homebrew (macOS)
+brew tap diagrammo/dgmo
+brew install dgmo
+
+# or run directly via npx
+npx @diagrammo/dgmo diagram.dgmo
+```
+
+## CLI usage
+
+```bash
+# First time with no args? Creates a sample.dgmo to get you started
+dgmo
+
+# Render to PNG (default)
+dgmo diagram.dgmo              # → diagram.png
+
+# Render to SVG
+dgmo diagram.dgmo -o output.svg
+
+# Explicit PNG
+dgmo diagram.dgmo -o output.png
+
+# Pipe from stdin
+cat diagram.dgmo | dgmo -o out.png
+cat diagram.dgmo | dgmo > out.png    # PNG to stdout
+
+# With theme and palette options
+dgmo diagram.dgmo --theme dark --palette catppuccin
+```
+
+| Option | Values | Default |
+|---|---|---|
+| `--theme` | `light`, `dark`, `transparent` | `light` |
+| `--palette` | `nord`, `solarized`, `catppuccin`, `rose-pine`, `gruvbox`, `tokyo-night`, `one-dark`, `bold` | `nord` |
+
 ## How it works
 
 Every `.dgmo` file is plain text with a `chart: <type>` header followed by metadata and data. The library routes each chart type to the right framework and gives you either:

package/dist/cli.cjs

@@ -2459,6 +2459,7 @@ var init_renderer = __esm({
 var import_node_fs = require("fs");
 var import_node_path = require("path");
 var import_jsdom = require("jsdom");
+var import_resvg_js = require("@resvg/resvg-js");
 
 // src/d3.ts
 var d3Scale = __toESM(require("d3-scale"), 1);
@@ -5056,13 +5057,15 @@ var PALETTES = [
 ];
 var THEMES = ["light", "dark", "transparent"];
 function printHelp() {
-  console.log(`Usage: dgmo render <input> [options]
+  console.log(`Usage: dgmo <input> [options]
+       cat input.dgmo | dgmo [options]
 
-Commands:
-  render <input>    Render a .dgmo file to SVG
+Render a .dgmo file to PNG (default) or SVG.
 
 Options:
-  -o <file>         Write SVG to file (default: stdout)
+  -o <file>         Output file (default: <input>.png in cwd)
+                    Format inferred from extension: .svg \u2192 SVG, else PNG
+                    With stdin and no -o, PNG is written to stdout
   --theme <theme>   Theme: ${THEMES.join(", ")} (default: light)
   --palette <name>  Palette: ${PALETTES.join(", ")} (default: nord)
   --help            Show this help
@@ -5076,7 +5079,6 @@ function printVersion() {
 }
 function parseArgs(argv) {
   const result = {
-    command: void 0,
     input: void 0,
     output: void 0,
     theme: "light",
@@ -5117,9 +5119,6 @@ function parseArgs(argv) {
       }
       result.palette = val;
       i++;
-    } else if (!result.command) {
-      result.command = arg;
-      i++;
     } else if (!result.input) {
       result.input = arg;
       i++;
@@ -5139,6 +5138,53 @@ function setupDom() {
   Object.defineProperty(globalThis, "HTMLElement", { value: win.HTMLElement, configurable: true });
   Object.defineProperty(globalThis, "SVGElement", { value: win.SVGElement, configurable: true });
 }
+function inferFormat(outputPath) {
+  if (outputPath && (0, import_node_path.extname)(outputPath).toLowerCase() === ".svg") {
+    return "svg";
+  }
+  return "png";
+}
+function svgToPng(svg, background) {
+  const resvg = new import_resvg_js.Resvg(svg, {
+    fitTo: { mode: "zoom", value: 2 },
+    ...background ? { background } : {}
+  });
+  const rendered = resvg.render();
+  return rendered.asPng();
+}
+function noInput() {
+  const samplePath = (0, import_node_path.resolve)("sample.dgmo");
+  if ((0, import_node_fs.existsSync)(samplePath)) {
+    console.error("Error: No input file specified");
+    console.error(`Try: dgmo ${(0, import_node_path.basename)(samplePath)}`);
+    process.exit(1);
+  }
+  (0, import_node_fs.writeFileSync)(
+    samplePath,
+    [
+      "chart: sequence",
+      "activations: off",
+      "",
+      "  Client -> API: POST /login",
+      "  API -> Auth: validate credentials",
+      "  Auth -> DB: SELECT user",
+      "  DB -> Auth: user record",
+      "  Auth -> API: JWT token",
+      "  API -> Client: 200 OK { token }",
+      ""
+    ].join("\n"),
+    "utf-8"
+  );
+  console.error(`Created ${samplePath}`);
+  console.error("");
+  console.error("  Render it:  dgmo sample.dgmo");
+  console.error("  As SVG:     dgmo sample.dgmo -o sample.svg");
+  console.error("");
+  console.error(
+    "Edit sample.dgmo to make it your own, or run dgmo --help for all options."
+  );
+  process.exit(0);
+}
 async function main() {
   const opts = parseArgs(process.argv);
   if (opts.help) {
@@ -5149,27 +5195,28 @@ async function main() {
     printVersion();
     return;
   }
-  if (opts.command !== "render") {
-    if (opts.command) {
-      console.error(`Error: Unknown command "${opts.command}"`);
-    } else {
-      console.error("Error: No command specified");
-    }
-    console.error('Run "dgmo --help" for usage');
-    process.exit(1);
-  }
-  if (!opts.input) {
-    console.error("Error: No input file specified");
-    console.error("Usage: dgmo render <input> [-o output.svg]");
-    process.exit(1);
-  }
-  const inputPath = (0, import_node_path.resolve)(opts.input);
   let content;
-  try {
-    content = (0, import_node_fs.readFileSync)(inputPath, "utf-8");
-  } catch {
-    console.error(`Error: Cannot read file "${inputPath}"`);
-    process.exit(1);
+  let inputBasename;
+  const stdinIsPiped = !process.stdin.isTTY;
+  if (opts.input) {
+    const inputPath = (0, import_node_path.resolve)(opts.input);
+    try {
+      content = (0, import_node_fs.readFileSync)(inputPath, "utf-8");
+    } catch {
+      console.error(`Error: Cannot read file "${inputPath}"`);
+      process.exit(1);
+    }
+    const name = (0, import_node_path.basename)(opts.input);
+    const ext = (0, import_node_path.extname)(name);
+    inputBasename = ext ? name.slice(0, -ext.length) : name;
+  } else if (stdinIsPiped) {
+    try {
+      content = (0, import_node_fs.readFileSync)(0, "utf-8");
+    } catch {
+      noInput();
+    }
+  } else {
+    noInput();
   }
   setupDom();
   const isDark = opts.theme === "dark";
@@ -5181,12 +5228,22 @@ async function main() {
     );
     process.exit(1);
   }
+  const format = inferFormat(opts.output);
+  const pngBg = opts.theme === "transparent" ? void 0 : paletteColors.bg;
   if (opts.output) {
     const outputPath = (0, import_node_path.resolve)(opts.output);
-    (0, import_node_fs.writeFileSync)(outputPath, svg, "utf-8");
+    if (format === "svg") {
+      (0, import_node_fs.writeFileSync)(outputPath, svg, "utf-8");
+    } else {
+      (0, import_node_fs.writeFileSync)(outputPath, svgToPng(svg, pngBg));
+    }
+    console.error(`Wrote ${outputPath}`);
+  } else if (inputBasename) {
+    const outputPath = (0, import_node_path.resolve)(`${inputBasename}.png`);
+    (0, import_node_fs.writeFileSync)(outputPath, svgToPng(svg, pngBg));
     console.error(`Wrote ${outputPath}`);
   } else {
-    process.stdout.write(svg);
+    process.stdout.write(svgToPng(svg, pngBg));
   }
 }
 main().catch((err) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",
@@ -33,6 +33,7 @@
     "dev": "tsup --watch"
   },
   "dependencies": {
+    "@resvg/resvg-js": "^2.6.2",
     "chart.js": "^4.4.8",
     "chartjs-plugin-datalabels": "^2.2.0",
     "d3-array": "^3.2.4",
@@ -44,12 +45,12 @@
     "jsdom": "^26.0.0"
   },
   "devDependencies": {
-    "@types/jsdom": "^21.1.7",
     "@types/d3-array": "^3.2.1",
     "@types/d3-cloud": "^1.2.9",
     "@types/d3-scale": "^4.0.8",
     "@types/d3-selection": "^3.0.11",
     "@types/d3-shape": "^3.1.7",
+    "@types/jsdom": "^21.1.7",
     "tsup": "^8.5.1",
     "typescript": "^5.7.3"
   }

package/src/cli.ts

@@ -1,6 +1,7 @@
-import { readFileSync, writeFileSync } from 'node:fs';
-import { resolve } from 'node:path';
+import { existsSync, readFileSync, writeFileSync } from 'node:fs';
+import { resolve, basename, extname } from 'node:path';
 import { JSDOM } from 'jsdom';
+import { Resvg } from '@resvg/resvg-js';
 import { renderD3ForExport } from './d3';
 import { getPalette } from './palettes/registry';
 
@@ -18,13 +19,15 @@ const PALETTES = [
 const THEMES = ['light', 'dark', 'transparent'] as const;
 
 function printHelp(): void {
-  console.log(`Usage: dgmo render <input> [options]
+  console.log(`Usage: dgmo <input> [options]
+       cat input.dgmo | dgmo [options]
 
-Commands:
-  render <input>    Render a .dgmo file to SVG
+Render a .dgmo file to PNG (default) or SVG.
 
 Options:
-  -o <file>         Write SVG to file (default: stdout)
+  -o <file>         Output file (default: <input>.png in cwd)
+                    Format inferred from extension: .svg → SVG, else PNG
+                    With stdin and no -o, PNG is written to stdout
   --theme <theme>   Theme: ${THEMES.join(', ')} (default: light)
   --palette <name>  Palette: ${PALETTES.join(', ')} (default: nord)
   --help            Show this help
@@ -39,7 +42,6 @@ function printVersion(): void {
 }
 
 function parseArgs(argv: string[]): {
-  command: string | undefined;
   input: string | undefined;
   output: string | undefined;
   theme: (typeof THEMES)[number];
@@ -48,7 +50,6 @@ function parseArgs(argv: string[]): {
   version: boolean;
 } {
   const result = {
-    command: undefined as string | undefined,
     input: undefined as string | undefined,
     output: undefined as string | undefined,
     theme: 'light' as (typeof THEMES)[number],
@@ -92,9 +93,6 @@ function parseArgs(argv: string[]): {
       }
       result.palette = val;
       i++;
-    } else if (!result.command) {
-      result.command = arg;
-      i++;
     } else if (!result.input) {
       result.input = arg;
       i++;
@@ -119,6 +117,56 @@ function setupDom(): void {
   Object.defineProperty(globalThis, 'SVGElement', { value: win.SVGElement, configurable: true });
 }
 
+function inferFormat(outputPath: string | undefined): 'svg' | 'png' {
+  if (outputPath && extname(outputPath).toLowerCase() === '.svg') {
+    return 'svg';
+  }
+  return 'png';
+}
+
+function svgToPng(svg: string, background?: string): Buffer {
+  const resvg = new Resvg(svg, {
+    fitTo: { mode: 'zoom', value: 2 },
+    ...(background ? { background } : {}),
+  });
+  const rendered = resvg.render();
+  return rendered.asPng();
+}
+
+function noInput(): never {
+  const samplePath = resolve('sample.dgmo');
+  if (existsSync(samplePath)) {
+    console.error('Error: No input file specified');
+    console.error(`Try: dgmo ${basename(samplePath)}`);
+    process.exit(1);
+  }
+  writeFileSync(
+    samplePath,
+    [
+      'chart: sequence',
+      'activations: off',
+      '',
+      '  Client -> API: POST /login',
+      '  API -> Auth: validate credentials',
+      '  Auth -> DB: SELECT user',
+      '  DB -> Auth: user record',
+      '  Auth -> API: JWT token',
+      '  API -> Client: 200 OK { token }',
+      '',
+    ].join('\n'),
+    'utf-8'
+  );
+  console.error(`Created ${samplePath}`);
+  console.error('');
+  console.error('  Render it:  dgmo sample.dgmo');
+  console.error('  As SVG:     dgmo sample.dgmo -o sample.svg');
+  console.error('');
+  console.error(
+    'Edit sample.dgmo to make it your own, or run dgmo --help for all options.'
+  );
+  process.exit(0);
+}
+
 async function main(): Promise<void> {
   const opts = parseArgs(process.argv);
 
@@ -132,29 +180,33 @@ async function main(): Promise<void> {
     return;
   }
 
-  if (opts.command !== 'render') {
-    if (opts.command) {
-      console.error(`Error: Unknown command "${opts.command}"`);
-    } else {
-      console.error('Error: No command specified');
-    }
-    console.error('Run "dgmo --help" for usage');
-    process.exit(1);
-  }
-
-  if (!opts.input) {
-    console.error('Error: No input file specified');
-    console.error('Usage: dgmo render <input> [-o output.svg]');
-    process.exit(1);
-  }
-
-  const inputPath = resolve(opts.input);
+  // Determine input source
   let content: string;
-  try {
-    content = readFileSync(inputPath, 'utf-8');
-  } catch {
-    console.error(`Error: Cannot read file "${inputPath}"`);
-    process.exit(1);
+  let inputBasename: string | undefined;
+  const stdinIsPiped = !process.stdin.isTTY;
+
+  if (opts.input) {
+    // File argument provided
+    const inputPath = resolve(opts.input);
+    try {
+      content = readFileSync(inputPath, 'utf-8');
+    } catch {
+      console.error(`Error: Cannot read file "${inputPath}"`);
+      process.exit(1);
+    }
+    // Strip extension for default output name
+    const name = basename(opts.input);
+    const ext = extname(name);
+    inputBasename = ext ? name.slice(0, -ext.length) : name;
+  } else if (stdinIsPiped) {
+    // Read from stdin
+    try {
+      content = readFileSync(0, 'utf-8');
+    } catch {
+      noInput();
+    }
+  } else {
+    noInput();
   }
 
   // Set up jsdom before any d3/renderer code runs
@@ -174,12 +226,27 @@ async function main(): Promise<void> {
     process.exit(1);
   }
 
+  // Determine output format and destination
+  const format = inferFormat(opts.output);
+  const pngBg = opts.theme === 'transparent' ? undefined : paletteColors.bg;
+
   if (opts.output) {
+    // Explicit output path
     const outputPath = resolve(opts.output);
-    writeFileSync(outputPath, svg, 'utf-8');
+    if (format === 'svg') {
+      writeFileSync(outputPath, svg, 'utf-8');
+    } else {
+      writeFileSync(outputPath, svgToPng(svg, pngBg));
+    }
+    console.error(`Wrote ${outputPath}`);
+  } else if (inputBasename) {
+    // File input, no -o → write <basename>.png in cwd
+    const outputPath = resolve(`${inputBasename}.png`);
+    writeFileSync(outputPath, svgToPng(svg, pngBg));
     console.error(`Wrote ${outputPath}`);
   } else {
-    process.stdout.write(svg);
+    // Stdin input, no -o → write PNG to stdout
+    process.stdout.write(svgToPng(svg, pngBg));
   }
 }