@graph-artifact/core

Composable diagram toolkit with:

• Mermaid-like parsing (parseMermaid)
• graph layout/routing engine (layoutParsedGraph)
• React renderer (DiagramCanvas, GraphCanvas)
• Swagger/OpenAPI focused diagram generation

Install

npm i @graph-artifact/core

Peer dependencies:

• react
• react-dom
• @xyflow/react
• react-markdown

Entry points

• @graph-artifact/core: headless/core APIs (Node-safe)
• @graph-artifact/core/core: explicit headless/core APIs
• @graph-artifact/core/react: React rendering APIs

Quick start (core)

import { parseMermaid, layoutParsedGraph, getThemeTokens } from '@graph-artifact/core';

const parsed = parseMermaid('flowchart TB\nA-->B');
if (parsed && parsed.kind === 'graph') {
  const theme = { ...getThemeTokens('dark'), name: 'dark' };
  const { nodes, edges } = layoutParsedGraph(parsed, { theme });
  console.log(nodes.length, edges.length);
}

Quick start (React)

import { parseMermaid } from '@graph-artifact/core';
import { ThemeProvider, DiagramCanvas } from '@graph-artifact/core/react';

const parsed = parseMermaid('flowchart TB\nA-->B');

export function App() {
  if (!parsed || parsed.kind !== 'graph') return null;
  return (
    <ThemeProvider>
      <DiagramCanvas parsed={parsed} metadata={{}} onNodeClick={() => {}} />
    </ThemeProvider>
  );
}

Notes

• Use @graph-artifact/core/react for UI components.
• Use @graph-artifact/core for parser/layout/server workflows.
• For invalid syntax/layout, surface parse/layout errors to callers instead of crashing UI runtimes.