{"id":51820522,"url":"https://github.com/Nigelli/ngx-mermaid-canvas","last_synced_at":"2026-07-24T14:00:37.363Z","repository":{"id":371339551,"uuid":"1198681528","full_name":"Nigelli/ngx-mermaid-canvas","owner":"Nigelli","description":"A mermaid canvas editor","archived":false,"fork":false,"pushed_at":"2026-07-14T14:25:00.000Z","size":8111,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-07-14T16:05:01.607Z","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/Nigelli.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"ROADMAP.md","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-04-01T16:51:01.000Z","updated_at":"2026-07-14T14:27:04.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Nigelli/ngx-mermaid-canvas","commit_stats":null,"previous_names":["nigelli/ngx-mermaid-canvas"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/Nigelli/ngx-mermaid-canvas","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nigelli%2Fngx-mermaid-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nigelli%2Fngx-mermaid-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nigelli%2Fngx-mermaid-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nigelli%2Fngx-mermaid-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nigelli","download_url":"https://codeload.github.com/Nigelli/ngx-mermaid-canvas/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nigelli%2Fngx-mermaid-canvas/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35844578,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-07-24T02:00:07.870Z","response_time":62,"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-07-22T05:00:25.535Z","updated_at":"2026-07-24T14:00:37.354Z","avatar_url":"https://github.com/Nigelli.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Editors"],"readme":"# ngx-mermaid-canvas\n\n[![npm version](https://img.shields.io/npm/v/ngx-mermaid-canvas.svg)](https://www.npmjs.com/package/ngx-mermaid-canvas)\n[![Live demo](https://img.shields.io/badge/demo-live-2ea44f.svg)](https://nigelli.github.io/ngx-mermaid-canvas/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n\n**▶ [Try the live demo](https://nigelli.github.io/ngx-mermaid-canvas/)** — the editor running in your browser.\n\n\u003e **Early-stage project** — this library is under active development and is not yet production-ready. APIs may change without notice. Contributions, ideas, and bug reports are very welcome, but please be aware that responses and reviews may be slow. If you're looking for a battle-tested solution, this isn't it yet — but if you're happy to experiment and help shape the direction, pull up a chair!\n\nA visual flowchart editor for Angular that outputs [Mermaid](https://mermaid.js.org/) syntax. Drag, drop, and connect nodes on a canvas — get valid Mermaid code out the other side.\n\n\u003c!-- TODO: Add screenshot or GIF here --\u003e\n\n## Features\n\n- Visual drag-and-drop flowchart canvas (powered by [maxGraph](https://github.com/maxGraph/maxGraph))\n- Bidirectional sync — edit visually or write Mermaid text directly\n- Live Mermaid preview panel\n- 11 node shapes: rectangle, rounded, diamond, circle, stadium, parallelogram, subroutine, asymmetric, hexagon, cylinder, trapezoid\n- 4 edge types: solid arrow, dashed arrow, thick arrow, open (no arrow)\n- Edge labels\n- Auto-layout (via [dagre](https://github.com/dagrejs/dagre))\n- Undo/redo, copy/paste, keyboard shortcuts\n- Shape palette, context menus, minimap\n- Configurable panels — show/hide text editor, preview, and palette independently\n\n## Installation\n\n```bash\nnpm install ngx-mermaid-canvas\n```\n\n### Peer dependencies\n\n```bash\nnpm install @angular/common @angular/core @maxgraph/core mermaid\n```\n\n## Usage\n\n```typescript\nimport { MermaidEditorComponent } from 'ngx-mermaid-canvas';\n\n@Component({\n  imports: [MermaidEditorComponent],\n  template: `\n    \u003cngx-mermaid-canvas\n      [mermaidText]=\"code\"\n      (mermaidTextChange)=\"onCodeChange($event)\"\n    /\u003e\n  `,\n  styles: `:host { display: block; height: 600px; }`,\n})\nexport class MyComponent {\n  code = 'graph TD\\n  A[Start] --\u003e B[End]';\n\n  onCodeChange(mermaid: string) {\n    console.log(mermaid);\n  }\n}\n```\n\n## API\n\n### Inputs\n\n| Input            | Type            | Default | Description                          |\n| ---------------- | --------------- | ------- | ------------------------------------ |\n| `mermaidText`    | `string`        | `''`    | Initial Mermaid flowchart syntax     |\n| `direction`      | `FlowDirection` | `'TD'`  | Graph direction: `TD`, `LR`, `RL`, `BT` |\n| `showTextEditor` | `boolean`       | `true`  | Show the Mermaid text editor panel   |\n| `showPreview`    | `boolean`       | `true`  | Show the live Mermaid preview panel  |\n| `showPalette`    | `boolean`       | `true`  | Show the shape palette sidebar       |\n\n### Outputs\n\n| Output              | Type             | Description                              |\n| ------------------- | ---------------- | ---------------------------------------- |\n| `mermaidTextChange`  | `string`         | Emits updated Mermaid syntax on changes  |\n| `modelChange`        | `FlowchartModel` | Emits the internal graph model on changes |\n\n### Exported types\n\n```typescript\nimport type {\n  FlowchartModel, FlowNode, FlowEdge, FlowSubgraph,\n  FlowDirection, MermaidShape, MermaidEdgeType,\n} from 'ngx-mermaid-canvas';\n\nimport { createEmptyModel, cloneModel } from 'ngx-mermaid-canvas';\n```\n\n### Standalone services\n\nThe serializer and deserializer are also exported if you need Mermaid conversion without the visual editor:\n\n```typescript\nimport {\n  MermaidSerializerService,\n  MermaidDeserializerService,\n} from 'ngx-mermaid-canvas';\n```\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNigelli%2Fngx-mermaid-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNigelli%2Fngx-mermaid-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNigelli%2Fngx-mermaid-canvas/lists"}