Open Diagram

Modern, beautiful cloud architecture and system diagramming canvas and component library for React and Next.js.

Installation

Install the package via npm (or pnpm / yarn):

npm install @gokulkrishnan2001/open-diagram@latest
# Peer dependencies
npm install @xyflow/react lucide-react zustand

CLI / Instant Studio

Run instantly in your terminal without installing:

npx @gokulkrishnan2001/open-diagram

Quick Start

1. Full Interactive Diagram Studio

Embed the complete diagramming studio into any page:

'use client';

import { OpenDiagram } from '@gokulkrishnan2001/open-diagram';

export default function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <OpenDiagram />
    </div>
  );
}

2. Embedded Canvas with Custom Controls

You can also import granular components, custom nodes, hooks, and stores:

'use client';

import { 
  CanvasWrapper, 
  TopBar, 
  LeftSidebar, 
  RightPanel, 
  useCanvasStore,
  useProjectStore,
  useUIStore,
  nodeTypes,
  edgeTypes,
  AWS_CATALOG 
} from 'open-diagram';

Props (OpenDiagramProps)

| Prop | Type | Default | Description | |---|---|---|---| | projectId | string | undefined | ID of the project to open directly | | initialNodes | Node[] | [] | Initial node array for headless canvas initialization | | initialEdges | Edge[] | [] | Initial edge array | | showTopBar | boolean | true | Show or hide the top toolbar | | showLeftSidebar | boolean | true | Show or hide the AWS & primitive shapes sidebar | | showRightPanel | boolean | true | Show or hide the properties inspector | | showStatusBar | boolean | true | Show or hide the bottom status bar | | showDashboard | boolean | true | Show project management dashboard when no project is open | | className | string | "" | Custom container CSS classes | | style | CSSProperties | undefined | Custom inline styles |

Development & Publishing

Build the Package

npm run build:package

This generates the CommonJS (dist/index.js), ES Module (dist/index.mjs), and TypeScript definitions (dist/index.d.ts).

Run Next.js Local Dev / Playground

npm run dev

Build Everything (Package + Next.js App)

npm run build:all

Publishing to NPM

1. Login to your NPM registry:

   npm login

2. Bump the version:

   npm version patch # or minor / major

3. Publish to NPM (which automatically runs prepublishOnly and tags @latest):

   npm publish

License

MIT