{"id":49991509,"url":"https://github.com/ag-gr-hub/flowchart-sequence-designer-angular","last_synced_at":"2026-05-19T05:05:57.092Z","repository":{"id":358759286,"uuid":"1242940990","full_name":"ag-gr-hub/flowchart-sequence-designer-angular","owner":"ag-gr-hub","description":null,"archived":false,"fork":false,"pushed_at":"2026-05-19T01:37:54.000Z","size":707,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-19T01:42:14.070Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ag-gr-hub.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-18T22:50:29.000Z","updated_at":"2026-05-19T01:37:57.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ag-gr-hub/flowchart-sequence-designer-angular","commit_stats":null,"previous_names":["ag-gr-hub/flowchart-sequence-designer-angular"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/ag-gr-hub/flowchart-sequence-designer-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ag-gr-hub%2Fflowchart-sequence-designer-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ag-gr-hub%2Fflowchart-sequence-designer-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ag-gr-hub%2Fflowchart-sequence-designer-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ag-gr-hub%2Fflowchart-sequence-designer-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ag-gr-hub","download_url":"https://codeload.github.com/ag-gr-hub/flowchart-sequence-designer-angular/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ag-gr-hub%2Fflowchart-sequence-designer-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33200146,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T09:27:30.708Z","status":"online","status_checked_at":"2026-05-19T02:00:06.763Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-05-19T05:05:56.353Z","updated_at":"2026-05-19T05:05:57.074Z","avatar_url":"https://github.com/ag-gr-hub.png","language":"TypeScript","funding_links":[],"categories":["Framework Interoperability"],"sub_categories":["Wrappers"],"readme":"# @flowchart-sequence-designer/angular\n\n[![npm](https://img.shields.io/npm/v/@flowchart-sequence-designer/angular)](https://www.npmjs.com/package/@flowchart-sequence-designer/angular)\n[![CI](https://github.com/ag-gr-hub/flowchart-sequence-designer-angular/actions/workflows/test.yml/badge.svg)](https://github.com/ag-gr-hub/flowchart-sequence-designer-angular/actions)\n[![CodeQL](https://github.com/ag-gr-hub/flowchart-sequence-designer-angular/actions/workflows/codeql.yml/badge.svg)](https://github.com/ag-gr-hub/flowchart-sequence-designer-angular/actions/workflows/codeql.yml)\n\nAngular wrapper for [flowchart-sequence-designer](https://www.npmjs.com/package/flowchart-sequence-designer) — embed the full-featured flowchart \u0026 sequence-diagram editor in Angular apps using standalone components.\n\n**🔗 [Live demo \u0026 developer docs →](https://ag-gr-hub.github.io/flowchart-sequence-designer-angular/)**\nOpen it to drive the editor, switch variants (Flowchart / Question / Journey / Sequence), and explore the docs tab for API snippets. Every variant boots with a working sample diagram so you can poke without any setup.\n\n## Installation\n\n```bash\nnpm install @flowchart-sequence-designer/angular flowchart-sequence-designer react react-dom\n```\n\nAngular 16+ is required (standalone components). The core API has zero runtime dependencies; React 18+ is a peer dependency for the visual editor.\n\n## Components\n\n| Component | Selector | Description |\n|-----------|----------|-------------|\n| `FsdDiagramComponent` | `\u003cfsd-diagram\u003e` | Full diagram editor (flowchart/question/journey) |\n| `FsdSequenceComponent` | `\u003cfsd-sequence\u003e` | Sequence diagram editor |\n| `FsdToolbarComponent` | `\u003cfsd-toolbar\u003e` | Standalone export/import toolbar |\n| `FsdStepEditorComponent` | `\u003cfsd-step-editor\u003e` | Node property editor panel |\n\nAll components are **standalone** — import them directly, no NgModule required.\n\n## Quick Start\n\n### Flowchart Editor\n\n```typescript\nimport { Component } from '@angular/core';\nimport { FsdDiagramComponent } from '@flowchart-sequence-designer/angular';\nimport type { DiagramModel } from '@flowchart-sequence-designer/angular';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [FsdDiagramComponent],\n  template: `\n    \u003cfsd-diagram\n      [height]=\"600\"\n      [theme]=\"'dark'\"\n      [allowImport]=\"true\"\n      (modelChange)=\"onModelChange($event)\"\n      (exportEvent)=\"onExport($event)\"\n    /\u003e\n  `,\n})\nexport class AppComponent {\n  onModelChange(model: DiagramModel) {\n    console.log('Model updated:', model);\n  }\n\n  onExport(event: { format: string; content: string | Blob }) {\n    console.log('Exported:', event.format);\n  }\n}\n```\n\nThat's it — no provider, no theme setup, no required inputs. The editor\nmounts with a sample diagram, a working toolbar, undo/redo, drag-to-pan,\nscroll-to-zoom, and export buttons for Mermaid / PlantUML / JSON / SVG /\nPNG. Pass `[theme]=\"'dark'\"` or `[themeOverrides]=\"brandColors\"` to\nbrand-match, or `[initialModel]=\"emptyModel('flowchart')\"` to start blank.\n\n### Sequence Diagram Editor\n\n```typescript\nimport { Component } from '@angular/core';\nimport { FsdSequenceComponent, presetSequenceModel } from '@flowchart-sequence-designer/angular';\n\n@Component({\n  selector: 'app-sequence',\n  standalone: true,\n  imports: [FsdSequenceComponent],\n  template: `\n    \u003cfsd-sequence\n      [initialModel]=\"model\"\n      [height]=\"500\"\n      [theme]=\"'auto'\"\n      (modelChange)=\"onModelChange($event)\"\n    /\u003e\n  `,\n})\nexport class SequencePageComponent {\n  model = presetSequenceModel();\n  onModelChange(model: any) { /* ... */ }\n}\n```\n\n### Using with an Initial Model\n\n```typescript\nimport { presetFlowchartModel, emptyModel } from '@flowchart-sequence-designer/angular';\n\n// Pre-built flowchart with sample nodes\nconst flowchart = presetFlowchartModel('flowchart');\n\n// Empty model of any type\nconst blank = emptyModel('flowchart', 'question');\n```\n\n---\n\n## Programmatic API\n\nThe core library (`flowchart-sequence-designer`) exposes a fluent builder API, import/export functions, and a low-level Model class. These are re-exported from `@flowchart-sequence-designer/angular` for convenience.\n\n### Flowchart builder\n\n```typescript\nimport { flowchart } from 'flowchart-sequence-designer';\n\nconst diagram = flowchart('Order Flow')\n  .node('start',   'Start',           { shape: 'circle' })\n  .node('check',   'Payment valid?',  { shape: 'diamond' })\n  .node('success', 'Confirm order',   { shape: 'rectangle' })\n  .node('fail',    'Reject',          { shape: 'rectangle' })\n  .edge('start',   'check')\n  .edge('check',   'success', { label: 'Yes' })\n  .edge('check',   'fail',    { label: 'No' });\n\nconsole.log(diagram.toMermaid());\n```\n\n#### Node shapes\n\n| Shape | Description |\n|---|---|\n| `rectangle` | Standard process box (default) |\n| `diamond` | Decision / branch |\n| `circle` | Start or end terminal |\n| `parallelogram` | Input / output |\n\n#### Edge options\n\n```typescript\n.edge(from, to, {\n  label?: string,\n  style?: 'solid' | 'dashed' | 'dotted',\n  arrowhead?: 'arrow' | 'open' | 'none',\n})\n```\n\n---\n\n### Sequence diagram builder\n\n```typescript\nimport { sequence } from 'flowchart-sequence-designer';\n\nconst diagram = sequence('Auth Flow')\n  .actor('User')\n  .actor('Server')\n  .message('User',   'Server', 'POST /login')\n  .message('Server', 'User',   '200 OK + token', { style: 'dashed' });\n\nconsole.log(diagram.toMermaid());\n```\n\nActors auto-register from `message()` calls, so you can skip `.actor()` if you prefer.\n\n---\n\n### Export formats\n\nEvery builder exposes the same export methods:\n\n```typescript\ndiagram.toMermaid()   // string\ndiagram.toPlantUML()  // string\ndiagram.toJSON()      // string (serialised DiagramModel)\ndiagram.toSVG()       // string (SVG markup)\ndiagram.toPNG()       // Promise\u003cBlob\u003e  (browser only)\n```\n\n---\n\n### Import\n\n```typescript\nimport { fromMermaid, fromJSON } from 'flowchart-sequence-designer';\n\nconst model = fromMermaid('graph TD; A--\u003eB; B--\u003eC');\nconst model2 = fromJSON(jsonString);\n```\n\nRound-trip fidelity: `fromMermaid(diagram.toMermaid())` produces an equivalent model.\n\nYou can also feed imported models directly into the Angular component:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { FsdDiagramComponent } from '@flowchart-sequence-designer/angular';\nimport { fromMermaid } from 'flowchart-sequence-designer';\n\n@Component({\n  standalone: true,\n  imports: [FsdDiagramComponent],\n  template: `\u003cfsd-diagram [initialModel]=\"model\" /\u003e`,\n})\nexport class ImportedComponent {\n  model = fromMermaid('graph TD; A--\u003eB; B--\u003eC');\n}\n```\n\n---\n\n### Exporter / importer round-trip rules\n\nThe five export formats trade fidelity for portability:\n\n| Format | Round-trip | Preserved | Dropped or lossy |\n|---|---|---|---|\n| **JSON** | ✅ full | every field — `variant`, `metadata`, `waypoint`, x/y positions, edge arrowheads, message order | nothing |\n| **Mermaid (flowchart)** | partial | node shapes (`[]` `{}` `(())` `[/]`), labels, edge connectors (`--\u003e`, `-.-\u003e`, `---`, `-.-`), edge labels, `subgraph` → `metadata.group` | positions, `waypoint`, `metadata.answers`, `variant`. Dotted edges collapse to dashed. |\n| **Mermaid (sequence)** | partial | actor order, message arrows (`-\u003e\u003e`, `--\u003e\u003e`), labels | message metadata, styling overrides |\n| **PlantUML (flowchart)** | export-only | edge styles (`--\u003e` / `-[dashed]-\u003e` / `-[dotted]-\u003e`), labels, node id | shape distinctions (PlantUML state-diagram syntax is coarser), positions, `metadata`, `variant` |\n| **PlantUML (sequence)** | export-only | actor order, message style (`-\u003e`, `--\u003e`), labels | – |\n| **SVG** | export-only (rendered) | full visual parity with the canvas — same dot grid, same edge curves, same node styling | – |\n| **PNG** | export-only (rendered, **browser-only**) | same as SVG, rasterized at `devicePixelRatio` | – |\n\nIf you need 100% round-trip fidelity, use JSON. If you need a format that\nGitHub renders inline in markdown, use Mermaid. If you need a polished\nimage for documentation, use SVG or PNG.\n\n---\n\n### Presets \u0026 empty models\n\n```typescript\nimport {\n  presetFlowchartModel,\n  presetSequenceModel,\n  emptyModel,\n} from '@flowchart-sequence-designer/angular';\n\npresetFlowchartModel('flowchart')  // 6-node order flow with one decision\npresetFlowchartModel('question')   // 1-question / 3-answer router\npresetFlowchartModel('journey')    // 5-step onboarding sequence\npresetSequenceModel()              // 3-actor login handshake\n\nemptyModel('flowchart')            // { type:'flowchart', variant:'flowchart', nodes:[], edges:[] }\nemptyModel('flowchart', 'journey') // same with variant: 'journey'\nemptyModel('sequence')             // { type:'sequence', nodes:[], edges:[], actors:[], messages:[] }\n```\n\nAll presets return a deep clone — mutate the result freely.\n\n---\n\n### Working with the model directly\n\n```typescript\nimport { Model } from 'flowchart-sequence-designer';\n\nconst m = new Model('flowchart');\nm.addNode({ id: 'a', label: 'Step A', shape: 'rectangle' });\nm.addNode({ id: 'b', label: 'Step B', shape: 'rectangle' });\nm.addEdge({ id: 'e1', from: 'a', to: 'b', label: 'next' });\n\nconsole.log(m.toMermaid());\n```\n\n---\n\n## API Reference\n\n### `\u003cfsd-diagram\u003e` — FsdDiagramComponent\n\n| Input | Type | Default | Description |\n|-------|------|---------|-------------|\n| `initialModel` | `DiagramModel` | preset | Pre-populate the editor |\n| `height` | `string \\| number` | `'500px'` | Container height |\n| `allowedExports` | `ExportFormat[]` | all | Restrict export menu |\n| `allowImport` | `boolean` | `false` | Show import button |\n| `variant` | `'flowchart' \\| 'question' \\| 'journey'` | `'flowchart'` | Editor variant |\n| `theme` | `'light' \\| 'dark' \\| 'auto'` | `'light'` | Color theme |\n| `themeOverrides` | `Partial\u003cThemeColors\u003e` | — | Custom colors |\n\n| Output | Payload | Description |\n|--------|---------|-------------|\n| `modelChange` | `DiagramModel` | Emitted on every edit |\n| `exportEvent` | `{ format, content }` | Emitted when user exports |\n\n**Note:** Changing `initialModel` after first render will re-mount the entire editor (full reset).\n\n### `\u003cfsd-sequence\u003e` — FsdSequenceComponent\n\nSame as `\u003cfsd-diagram\u003e` except no `variant` input. Accepts `Partial\u003cSequenceThemeColors\u003e` for `themeOverrides`.\n\n### `\u003cfsd-toolbar\u003e` — FsdToolbarComponent\n\n| Input | Type | Description |\n|-------|------|-------------|\n| `allowedExports` | `ExportFormat[]` | Which formats to show |\n| `allowImport` | `boolean` | Show import button |\n\n| Output | Payload | Description |\n|--------|---------|-------------|\n| `exportRequest` | `ExportFormat` | Format the user chose |\n| `importRequest` | `string` | Raw text the user imported |\n\n### `\u003cfsd-step-editor\u003e` — FsdStepEditorComponent\n\n| Input | Type | Required | Description |\n|-------|------|----------|-------------|\n| `nodeId` | `string` | ✓ | ID of the node to edit |\n| `model` | `DiagramModel` | ✓ | Current diagram model |\n| `variant` | `DiagramVariant` | | Editor variant |\n| `isDark` | `boolean` | | Dark mode flag |\n| `themeColors` | `ThemeColors` | | Theme color overrides |\n\n| Output | Payload | Description |\n|--------|---------|-------------|\n| `modelChange` | `DiagramModel` | Updated model after edit |\n\n---\n\n### Diagram variants\n\n| Variant | Description |\n|---|---|\n| `flowchart` | General purpose — any shapes, freeform connections |\n| `question` | Each node is a question with lettered answer options (A, B, C…). Each answer has its own connection port. |\n| `journey` | Numbered milestone steps — user path or process walkthrough |\n\n---\n\n### Editor features\n\n**Canvas**\n- Drag nodes to reposition (snaps to 24px grid)\n- Scroll to zoom in/out (pinch to zoom on touch)\n- Drag the canvas background to pan (one-finger pan on touch)\n- Double-click a node to rename it inline\n- Dashed alignment guides appear when a dragged node lines up with a sibling's edge or center, and it snaps within 4 px\n- Bottom-right minimap — click or drag to pan the viewport\n- Accessibility: every node, port, and control is keyboard-reachable with a visible focus ring; selection / add / delete actions announce via an `aria-live` status region; the edge-flow animation honours `prefers-reduced-motion`\n\n**Connecting nodes**\n- Hover a node to reveal the bottom port dot, then drag it to another node\n- Question variant: each answer row has its own port dot — drag it to route that answer to a specific node\n\n**Node Navigator (left panel)**\n- Lists all nodes with shape badge, label, and connection counts\n- Search/filter by name\n- Click any row to jump to that node and center the canvas on it\n- Collapses to a slim icon strip\n\n**Step Editor (right panel)**\n- Appears when a node is selected\n- Edit the node name, change its shape\n- Manage branches / answer options (add, remove, reorder)\n- Question variant shows connection status per answer\n\n**Context menu** (right-click)\n- On canvas: Add node at cursor, Re-center, Undo, Redo\n- On node: Rename, Duplicate, Disconnect all edges, Delete\n- On edge: Style (solid/dashed/dotted), Arrowhead, Reset routing, Delete\n- On touch devices: long-press the canvas (~550ms) opens the canvas menu\n\n---\n\n### Keyboard shortcuts\n\n| Shortcut | Action |\n|---|---|\n| `Ctrl+Z` | Undo |\n| `Ctrl+Y` / `Ctrl+Shift+Z` | Redo |\n| `Ctrl+0` | Fit all nodes in view |\n| `Ctrl+C` / `Ctrl+V` | Copy and paste the current selection (internal edges preserved, +24 px offset on paste) |\n| `Ctrl+D` | Duplicate the current selection |\n| `Delete` / `Backspace` | Remove the current selection |\n| `Escape` | Deselect, cancel in-flight edge drag, close context menu |\n| `Arrow` keys | Nudge selection by 1 grid unit (Shift = 4 units) |\n| `Alt+Arrow` | Traverse to the nearest node in that direction from the current selection |\n| `Shift+click` | Toggle a node in/out of the current selection |\n| `Shift+drag` (empty canvas) | Box-select — add every intersected node to the selection |\n| Double-click edge label | Rename the edge label inline |\n| Drag edge midpoint | Route the edge through a waypoint (right-click → Reset routing to clear) |\n\n---\n\n### Theming\n\n```typescript\n// Force dark\n\u003cfsd-diagram [theme]=\"'dark'\" /\u003e\n\n// Force light\n\u003cfsd-diagram [theme]=\"'light'\" /\u003e\n\n// Follow system prefers-color-scheme (default)\n\u003cfsd-diagram [theme]=\"'auto'\" /\u003e\n```\n\nTo match the editor to a host application's brand, pass `themeOverrides` —\na `Partial\u003cThemeColors\u003e` that is shallow-merged on top of the resolved\nlight/dark palette:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { FsdDiagramComponent } from '@flowchart-sequence-designer/angular';\nimport type { ThemeColors } from '@flowchart-sequence-designer/angular';\n\n@Component({\n  standalone: true,\n  imports: [FsdDiagramComponent],\n  template: `\u003cfsd-diagram [theme]=\"'dark'\" [themeOverrides]=\"brand\" /\u003e`,\n})\nexport class BrandedComponent {\n  brand: Partial\u003cThemeColors\u003e = {\n    canvas: '#0b1020',\n    nodeFill: '#111a2e',\n    nodeStroke: '#2b3a5a',\n    nodeSelectedFill: '#1a2447',\n    edgeColor: '#7b8aa6',\n    textPrimary: '#e6edf7',\n  };\n}\n```\n\n#### ThemeColors token groups (flowchart)\n\n| Token group | Members | Where it shows up |\n|---|---|---|\n| Canvas | `canvas`, `dot` | Background + dot grid |\n| Nodes | `nodeFill`, `nodeStroke`, `nodeSelectedFill` | Node body, border, selection tint |\n| Edges | `edgeColor` | Edge stroke + arrowhead |\n| Type ramp | `textPrimary`, `textSecondary`, `textMuted` | Labels, hints, secondary text |\n| Chrome — panel | `panelBg`, `panelBorder` | Side panel surface |\n| Chrome — controls | `ctrlsBg`, `ctrlsBorder` | Toolbar, zoom controls |\n| Chrome — input | `inputBg`, `inputBorder`, `inputText` | Form fields in the side panel |\n| Chrome — card | `cardBg`, `cardBorder` | Answer rows, branch rows |\n| Chrome — section | `sectionBorder` | Divider between panel sections |\n| Buttons | `btnSecBg`, `btnSecText`, `shapeBtnBg`, `shapeBtnBorder` | Secondary buttons, shape picker |\n| Accents | `addFormBg`, `bannerBg`, `labelText`, `hintText`, `statusBg` | Add-form backdrop, validation banner |\n\n#### SequenceThemeColors (sequence)\n\nThe sequence editor accepts the same `[themeOverrides]` input with a\nslightly different shape — `Partial\u003cSequenceThemeColors\u003e`. It drops\nnode-specific tokens and adds `lifeline`, `arrow`, and `actorFill` /\n`actorStroke` / `actorText` for the swim-lane elements.\n\n---\n\n### Restricting exports and import\n\n```typescript\n// Only allow JSON and SVG download\n\u003cfsd-diagram [allowedExports]=\"['json', 'svg']\" /\u003e\n\n// Hide the import button entirely\n\u003cfsd-diagram [allowImport]=\"false\" /\u003e\n\n// Handle exports yourself (e.g. send to an API)\n\u003cfsd-diagram\n  (exportEvent)=\"handleExport($event)\"\n/\u003e\n// In component: handleExport(e: { format: string; content: string | Blob }) { ... }\n```\n\n---\n\n## Accessibility \u0026 touch\n\nThe editor is keyboard-first and screen-reader-aware. Every interaction\nreachable by mouse has a keyboard equivalent; every state change announces\nvia a polite `aria-live` region.\n\n**Keyboard navigation** — Every node, port, and toolbar control is reachable\nwith Tab; selection moves with Arrow keys (1 grid unit, or 4 with Shift);\nAlt+Arrow traverses the graph to the nearest connected neighbor in that\ndirection. The focus ring is visible at all times.\n\n**ARIA roles** — The canvas is an `application` region with an `aria-label`;\nselection, add, and delete actions update an `aria-live=\"polite\"` status\nregion announced as \"Selected {label}\", \"Added node {label}\", etc. The\ntoolbar uses native `\u003cbutton\u003e` elements with explicit labels.\n\n**Reduced motion** — The animated edge-flow dash honours\n`prefers-reduced-motion` — when set, the dash freezes and the canvas renders\nwith no animation.\n\n**Touch interactions:**\n| Action | Gesture |\n|---|---|\n| Pan | One-finger drag on the canvas background |\n| Zoom | Two-finger pinch |\n| Context menu | Long-press (~550 ms) on the canvas or on a node |\n| Larger hit targets | Port circles auto-enlarge on coarse-pointer devices (24 px vs. 14 px on mouse) |\n| Drag node | Press and drag the node body. The 8 px drag threshold lets you tap to select without nudging. |\n\n---\n\n## Security\n\nThis package uses the same core editor as the React version, which takes\nsecurity seriously:\n\n- **Input sanitization** — All user-provided text is sanitized before rendering\n  (HTML tags, `javascript:`/`data:`/`vbscript:` URIs, `on*` event handlers, and\n  control characters are stripped).\n- **Resource limits** — Importers enforce hard caps (500 nodes, 2000 edges, 100\n  actors, 2000 messages, 2MB input) to prevent resource exhaustion.\n- **Prototype pollution defense** — JSON importer strips `__proto__`,\n  `constructor`, and `prototype` keys recursively.\n- **SVG export** — Defence-in-depth: sanitize first, then XML-escape. Safe even\n  if consumed by less-strict parsers.\n- **No `eval` / `innerHTML`** — The codebase never uses dynamic code execution\n  or raw HTML injection.\n- **CodeQL** — Automated security scanning runs weekly and on every PR.\n- **Dependabot** — Dependency updates monitored weekly.\n\n---\n\n## Framework Wrappers\n\n| Framework | Package | Docs |\n|-----------|---------|------|\n| React | [`flowchart-sequence-designer`](https://www.npmjs.com/package/flowchart-sequence-designer) | [Docs \u0026 Demo](https://ag-gr-hub.github.io/flowchart-sequence-designer/) |\n| Angular | [`@flowchart-sequence-designer/angular`](https://www.npmjs.com/package/@flowchart-sequence-designer/angular) | [Docs \u0026 Demo](https://ag-gr-hub.github.io/flowchart-sequence-designer-angular/) |\n\n---\n\n## Re-exported Types\n\nFor convenience, common types are re-exported so you don't need a separate import:\n\n```typescript\nimport type {\n  DiagramModel,\n  DiagramNode,\n  DiagramEdge,\n  DiagramType,\n  DiagramVariant,\n  ExportFormat,\n  NodeShape,\n  SequenceMessage,\n  DiagramEditorProps,\n  SequenceEditorProps,\n  ThemeColors,\n  SequenceThemeColors,\n} from '@flowchart-sequence-designer/angular';\n```\n\n### `DiagramModel`\n\n```typescript\ninterface DiagramModel {\n  type: 'flowchart' | 'sequence';\n  variant?: DiagramVariant;    // 'flowchart' | 'question' | 'journey' (flowchart-type only)\n  title?: string;\n  nodes: DiagramNode[];        // always present (empty array for sequence models)\n  edges: DiagramEdge[];        // always present (empty array for sequence models)\n  actors?: string[];           // sequence models only — ordered actor names\n  messages?: SequenceMessage[]; // sequence models only — ordered messages\n}\n```\n\n### `DiagramNode`\n\n```typescript\ninterface DiagramNode {\n  id: string;\n  label: string;\n  shape?: 'rectangle' | 'diamond' | 'circle' | 'parallelogram';\n  x?: number;\n  y?: number;\n  metadata?: Record\u003cstring, unknown\u003e;\n  // question variant: metadata.answers = string[]\n}\n```\n\n### `DiagramEdge`\n\n```typescript\ninterface DiagramEdge {\n  id: string;\n  from: string;\n  to: string;\n  label?: string;\n  style?: 'solid' | 'dashed' | 'dotted';\n  arrowhead?: 'arrow' | 'none' | 'open';\n  waypoint?: { x: number; y: number }; // manual routing point (JSON only)\n}\n```\n\n### `SequenceMessage`\n\n```typescript\ninterface SequenceMessage {\n  id: string;\n  from: string;            // actor name\n  to: string;              // actor name\n  label: string;\n  style?: 'solid' | 'dashed';\n}\n```\n\n### `ValidationError`\n\n```typescript\ninterface ValidationError {\n  kind: 'dangling-from' | 'dangling-to' | 'duplicate-node-id' | 'duplicate-edge-id';\n  id: string;\n  message: string;\n}\n```\n\n---\n\n## Architecture\n\nThis wrapper uses a lightweight **React Bridge** pattern:\n\n1. Each Angular component creates a React root inside its template `\u003cdiv\u003e`\n2. Angular `@Input()` values are mapped to React props\n3. React `onChange`/`onExport` callbacks are wrapped in `NgZone.run()` to trigger Angular change detection\n4. React internal renders run **outside** Angular's zone (no unnecessary CD cycles)\n5. On `ngOnDestroy`, the React root is cleanly unmounted\n\n### Performance Considerations\n\n- **OnPush compatible** — all components use `ChangeDetectionStrategy.OnPush`\n- **Zone-optimized** — React renders don't trigger Angular's zone; only explicit outputs do\n- **Lazy-loaded** — the React editor is loaded via dynamic `import()` (code-split friendly)\n- **Minimal overhead** — the bridge is ~1KB; React+ReactDOM peer deps add ~45KB gzipped\n\n---\n\n## Package structure\n\n```\n@flowchart-sequence-designer/angular/\n├── dist/\n│   ├── index.js / index.d.ts        ← Angular components + re-exports\n│   └── public-api.ts                ← barrel export\n└── src/\n    ├── lib/\n    │   ├── fsd-diagram.component.ts  # \u003cfsd-diagram\u003e (flowchart/question/journey)\n    │   ├── fsd-sequence.component.ts # \u003cfsd-sequence\u003e\n    │   ├── fsd-toolbar.component.ts  # \u003cfsd-toolbar\u003e\n    │   └── fsd-step-editor.component.ts # \u003cfsd-step-editor\u003e\n    └── public-api.ts                 # types + component re-exports\n```\n\n---\n\n## Building from source\n\n```bash\nnpm install\nnpm run build        # library → dist/\ncd demo \u0026\u0026 npx ng build   # demo app\nnpm test             # unit tests\n```\n\n---\n\n## Requirements\n\n- Angular 16+ (standalone components)\n- `flowchart-sequence-designer` ≥ 1.2.0\n- `react` \u0026 `react-dom` ≥ 18\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fag-gr-hub%2Fflowchart-sequence-designer-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fag-gr-hub%2Fflowchart-sequence-designer-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fag-gr-hub%2Fflowchart-sequence-designer-angular/lists"}