{"_id":"@aigraphia/export","_rev":"2-9d70d08c4b4354140fd94f060688567f","name":"@aigraphia/export","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@aigraphia/export","version":"1.0.0","keywords":["aigp","diagram","export","svg","png","visualization"],"author":{"name":"AIGP Contributors"},"license":"MIT","_id":"@aigraphia/export@1.0.0","maintainers":[{"name":"tongzhouit","email":"tongzhouit@gmail.com"}],"homepage":"https://github.com/aigp/aigp/tree/main/packages/export#readme","bugs":{"url":"https://github.com/aigp/aigp/issues"},"dist":{"shasum":"9fdc945ef6afb82466525d9332c7780179ddd3a2","tarball":"https://registry.npmjs.org/@aigraphia/export/-/export-1.0.0.tgz","fileCount":15,"integrity":"sha512-HXv44kylsDMyXccaz7CNg6pkg0qlxnIiGJBPM9vkYpQ61m1m762tFnoZ3tRwsmeW9mqMx5Id7yMNML3jvEcHLQ==","signatures":[{"sig":"MEUCIBSQevmjd7s+sswHjCWFWUDnfjQOQigep4NCPzCGhQKGAiEAmBrBT03LBBLE8/ontqI3O0kjSGFbQ2IarMIgYlT0qqU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":39762},"main":"dist/index.js","type":"module","_from":"file:aigraphia-export-1.0.0.tgz","types":"dist/index.d.ts","engines":{"node":">=18"},"scripts":{"dev":"tsc --watch","lint":"eslint src/","test":"vitest","build":"tsc","clean":"rm -rf dist"},"_npmUser":{"name":"tongzhouit","email":"tongzhouit@gmail.com"},"_resolved":"/private/var/folders/tz/wk23tz3n3nj9k1hkm09y9qb00000gp/T/b919c3c5430eb5b113376a8c50f5cbbb/aigraphia-export-1.0.0.tgz","_integrity":"sha512-HXv44kylsDMyXccaz7CNg6pkg0qlxnIiGJBPM9vkYpQ61m1m762tFnoZ3tRwsmeW9mqMx5Id7yMNML3jvEcHLQ==","repository":{"url":"git+https://github.com/aigp/aigp.git","type":"git","directory":"packages/export"},"_npmVersion":"10.8.2","description":"SVG and PNG export for AIGP diagrams","directories":{},"_nodeVersion":"20.20.0","dependencies":{"jsdom":"^28.1.0","sharp":"^0.34.5","@aigraphia/layout":"1.0.0","@aigraphia/protocol":"1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^4.1.0","typescript":"^5.9.3","@types/node":"^25.5.0"},"_npmOperationalInternal":{"tmp":"tmp/export_1.0.0_1773551586732_0.21023480487010016","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aigraphia/export","version":"1.0.1","description":"SVG and PNG export for AIGP diagrams","type":"module","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","dev":"tsc --watch","test":"vitest","lint":"eslint src/","clean":"rm -rf dist"},"dependencies":{"@aigraphia/layout":"workspace:*","@aigraphia/protocol":"workspace:*","jsdom":"^28.1.0","sharp":"^0.34.5"},"devDependencies":{"@types/node":"^25.5.0","typescript":"^5.9.3","vitest":"^4.1.0"},"keywords":["aigp","diagram","export","svg","png","visualization"],"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/AIGraphia/aigp.git","directory":"packages/export"},"bugs":{"url":"https://github.com/AIGraphia/aigp/issues"},"homepage":"https://github.com/AIGraphia/aigp/tree/main/packages/export#readme","author":{"name":"AIGP Contributors"},"engines":{"node":">=18"},"license":"MIT","gitHead":"62e6ad39eebf6117ca239826a5c4bf5cb9f69956","_id":"@aigraphia/export@1.0.1","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-5VnziVDWH9o2v5/PHQkt2qqXsfv1wB33HBCpU5gLMJOqec1WKmMnu3wVL32Hg44PJa4Nay0QPqP5M6MG3h2XhQ==","shasum":"7e0de4ac98759369129ed33055dd167e38d50fa5","tarball":"https://registry.npmjs.org/@aigraphia/export/-/export-1.0.1.tgz","fileCount":15,"unpackedSize":39790,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aigraphia%2fexport@1.0.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIA6KB28mySYAFZxphD6z4a9xrYh1GdtK5dh4zi281ir3AiEA4FQqR2vcTAd+pAfT3e7mRdpdGswwiN+0GAJmJ7B89bE="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:899f29c7-3830-40e6-a4e1-afb4cc7c2b3d"}},"directories":{},"maintainers":[{"name":"tongzhouit","email":"tongzhouit@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/export_1.0.1_1773577117649_0.2185323996421522"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-15T05:13:06.663Z","modified":"2026-03-15T12:18:38.099Z","1.0.0":"2026-03-15T05:13:06.873Z","1.0.1":"2026-03-15T12:18:37.801Z"},"bugs":{"url":"https://github.com/AIGraphia/aigp/issues"},"author":{"name":"AIGP Contributors"},"license":"MIT","homepage":"https://github.com/AIGraphia/aigp/tree/main/packages/export#readme","keywords":["aigp","diagram","export","svg","png","visualization"],"repository":{"type":"git","url":"git+https://github.com/AIGraphia/aigp.git","directory":"packages/export"},"description":"SVG and PNG export for AIGP diagrams","maintainers":[{"name":"tongzhouit","email":"tongzhouit@gmail.com"}],"readme":"# @aigraphia/export\n\nSVG and PNG export functionality for AIGP diagrams.\n\n## Installation\n\n```bash\npnpm install @aigraphia/export\n```\n\n## Features\n\n- ✅ **SVG Export** - Convert AIGP diagrams to scalable vector graphics\n- ✅ **PNG Export** - High-quality raster image export\n- ✅ **Automatic Layout** - Applies layout if positions not specified\n- ✅ **Custom Styling** - Respects node/edge/group styles\n- ✅ **Multiple Shapes** - Rectangle, circle, diamond, hexagon support\n- ✅ **Retina Ready** - 2x scale by default for PNG\n- ✅ **Type Safe** - Full TypeScript support\n\n## Usage\n\n### SVG Export\n\n```typescript\nimport { renderToSVG } from '@aigraphia/export';\nimport type { AIGraphDocument } from '@aigraphia/protocol';\n\nconst diagram: AIGraphDocument = {\n  version: '1.0.0',\n  type: 'flowchart',\n  metadata: { title: 'My Diagram' },\n  graph: {\n    nodes: [\n      {\n        id: 'a',\n        type: 'process',\n        label: 'Start',\n        position: { x: 0, y: 0 },\n        size: { width: 100, height: 50 },\n        data: {},\n      },\n    ],\n    edges: [],\n  },\n  layout: { algorithm: 'manual' },\n};\n\n// Render to SVG string\nconst svg = await renderToSVG(diagram);\n\n// With options\nconst svg = await renderToSVG(diagram, {\n  width: 1200,\n  height: 800,\n  padding: 40,\n  backgroundColor: '#f5f5f5',\n});\n\n// Save to file\nimport fs from 'fs/promises';\nawait fs.writeFile('diagram.svg', svg);\n```\n\n### PNG Export\n\n```typescript\nimport { exportToPNG, exportToPNGFile } from '@aigraphia/export';\n\n// Export to buffer\nconst buffer = await exportToPNG(diagram, {\n  width: 800,\n  height: 600,\n  scale: 2, // 2x for retina displays\n  quality: 90,\n});\n\n// Export directly to file\nawait exportToPNGFile(diagram, 'diagram.png', {\n  width: 1200,\n  height: 800,\n  scale: 3, // Extra high quality\n});\n\n// Export as JPEG\nawait exportToPNGFile(diagram, 'diagram.jpg', {\n  format: 'jpeg',\n  quality: 85,\n});\n\n// Export as WebP\nawait exportToPNGFile(diagram, 'diagram.webp', {\n  format: 'webp',\n  quality: 90,\n});\n```\n\n### Using the Renderer Class\n\n```typescript\nimport { SVGRenderer } from '@aigraphia/export';\n\nconst renderer = new SVGRenderer({\n  width: 1000,\n  height: 800,\n  padding: 20,\n  backgroundColor: 'transparent',\n});\n\nconst svg = await renderer.render(diagram);\n```\n\n## Options\n\n### SVGRenderOptions\n\n```typescript\ninterface SVGRenderOptions {\n  width?: number;          // SVG width (default: 800)\n  height?: number;         // SVG height (default: 600)\n  padding?: number;        // Padding around diagram (default: 20)\n  backgroundColor?: string; // Background color (default: '#ffffff')\n  includeStyles?: boolean; // Include inline styles (default: true)\n  viewBox?: boolean;       // Use viewBox attribute (default: true)\n}\n```\n\n### PNGExportOptions\n\nExtends `SVGRenderOptions` with:\n\n```typescript\ninterface PNGExportOptions extends SVGRenderOptions {\n  scale?: number;          // Scale factor (default: 2)\n  quality?: number;        // Image quality 1-100 (default: 90)\n  format?: 'png' | 'jpeg' | 'webp'; // Output format (default: 'png')\n}\n```\n\n## Supported Shapes\n\n- **rectangle** - Rounded rectangles (default)\n- **circle** / **ellipse** - Circular/elliptical nodes\n- **diamond** - Decision diamond shape\n- **hexagon** - Six-sided polygon\n- **parallelogram** - Slanted rectangle (coming soon)\n- **cylinder** - Database/storage shape (coming soon)\n\n## Supported Edge Styles\n\n- **solid** - Solid line (default)\n- **dashed** - Dashed line\n- **dotted** - Dotted line\n- **curved** - Curved bezier path\n\n## Automatic Layout\n\nIf your diagram nodes don't have positions, the exporter will automatically apply the specified layout algorithm:\n\n```typescript\nconst diagram: AIGraphDocument = {\n  version: '1.0.0',\n  type: 'flowchart',\n  metadata: { title: 'Auto Layout' },\n  graph: {\n    nodes: [\n      { id: 'a', type: 'process', label: 'A', data: {} }, // No position!\n      { id: 'b', type: 'process', label: 'B', data: {} },\n    ],\n    edges: [\n      { id: 'e1', type: 'flow', source: 'a', target: 'b', data: {} },\n    ],\n  },\n  layout: { algorithm: 'hierarchical' }, // Will be applied automatically\n};\n\nconst svg = await renderToSVG(diagram);\n// Nodes will have computed positions\n```\n\n## Examples\n\n### Flowchart\n\n```typescript\nimport { exportToPNGFile } from '@aigraphia/export';\n\nconst flowchart = {\n  version: '1.0.0',\n  type: 'flowchart',\n  metadata: { title: 'Decision Flow' },\n  graph: {\n    nodes: [\n      { id: '1', type: 'start', label: 'Start', position: { x: 100, y: 0 }, data: {} },\n      { id: '2', type: 'decision', label: 'Check?', position: { x: 100, y: 100 }, data: {}, style: { shape: 'diamond' } },\n      { id: '3', type: 'process', label: 'Yes', position: { x: 0, y: 200 }, data: {} },\n      { id: '4', type: 'process', label: 'No', position: { x: 200, y: 200 }, data: {} },\n    ],\n    edges: [\n      { id: 'e1', type: 'flow', source: '1', target: '2', data: {} },\n      { id: 'e2', type: 'flow', source: '2', target: '3', label: 'Yes', data: {} },\n      { id: 'e3', type: 'flow', source: '2', target: '4', label: 'No', data: {} },\n    ],\n  },\n  layout: { algorithm: 'hierarchical' },\n};\n\nawait exportToPNGFile(flowchart, 'flowchart.png', {\n  width: 800,\n  height: 600,\n});\n```\n\n### Organization Chart\n\n```typescript\nconst orgChart = {\n  version: '1.0.0',\n  type: 'org-chart',\n  metadata: { title: 'Company Structure' },\n  graph: {\n    nodes: [\n      { id: 'ceo', type: 'executive', label: 'CEO', data: {} },\n      { id: 'cto', type: 'executive', label: 'CTO', data: {} },\n      { id: 'cfo', type: 'executive', label: 'CFO', data: {} },\n    ],\n    edges: [\n      { id: 'e1', type: 'reports-to', source: 'cto', target: 'ceo', data: {} },\n      { id: 'e2', type: 'reports-to', source: 'cfo', target: 'ceo', data: {} },\n    ],\n  },\n  layout: { algorithm: 'hierarchical', direction: 'TB' },\n};\n\nawait exportToPNGFile(orgChart, 'org-chart.png');\n```\n\n## Advanced Usage\n\n### Custom Arrow Styles\n\nThe SVG renderer includes arrow markers for directed edges:\n\n```typescript\nconst diagram = {\n  // ...\n  graph: {\n    nodes: [/* ... */],\n    edges: [\n      {\n        id: 'e1',\n        type: 'flow',\n        source: 'a',\n        target: 'b',\n        data: {},\n        style: {\n          strokeColor: '#ff0000',\n          strokeWidth: 3,\n          arrowEnd: 'arrow', // Will render arrow marker\n        },\n      },\n    ],\n  },\n};\n```\n\n### Group Rendering\n\nGroups (containers, swimlanes) are rendered as semi-transparent backgrounds:\n\n```typescript\nconst diagram = {\n  // ...\n  graph: {\n    nodes: [\n      { id: 'a', type: 'process', label: 'Task A', position: { x: 10, y: 10 }, data: {} },\n      { id: 'b', type: 'process', label: 'Task B', position: { x: 10, y: 80 }, data: {} },\n    ],\n    edges: [],\n    groups: [\n      {\n        id: 'g1',\n        type: 'swimlane',\n        label: 'Team Alpha',\n        nodeIds: ['a', 'b'],\n        data: {},\n        style: {\n          backgroundColor: '#e3f2fd',\n          borderColor: '#2196f3',\n          opacity: 0.3,\n        },\n      },\n    ],\n  },\n};\n```\n\n## Performance\n\n- **SVG Rendering**: <50ms for typical diagrams (50 nodes, 50 edges)\n- **PNG Export**: ~200ms for 800x600 @ 2x scale\n- **Large Diagrams**: Tested up to 1000 nodes\n\n## Dependencies\n\n- `@aigraphia/protocol` - Core AIGP types\n- `@aigraphia/plugins` - Plugin system\n- `@aigraphia/layout` - Layout engines\n- `sharp` - High-performance image processing\n- `jsdom` - DOM manipulation for SVG\n\n## License\n\nMIT - See LICENSE file for details\n\n## Contributing\n\nSee [CONTRIBUTING.md](../../CONTRIBUTING.md) for guidelines.\n\n## Related Packages\n\n- `@aigraphia/protocol` - Core protocol definitions\n- `@aigraphia/layout` - Layout algorithms\n- `@aigraphia/converters` - Format converters (Mermaid, etc.)\n- `@aigraphia/cli` - Command-line interface\n","readmeFilename":"README.md"}