https://github.com/vedph/ngx-viz
Simple Angular viz.js wrapper to render DOT graphs.
https://github.com/vedph/ngx-viz
Last synced: 26 days ago
JSON representation
Simple Angular viz.js wrapper to render DOT graphs.
- Host: GitHub
- URL: https://github.com/vedph/ngx-viz
- Owner: vedph
- Created: 2025-01-11T21:46:31.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2025-07-12T13:53:36.000Z (4 months ago)
- Last Synced: 2025-08-20T04:44:44.588Z (2 months ago)
- Language: TypeScript
- Size: 200 KB
- Stars: 2
- Watchers: 7
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - ngx-viz - Simple Angular [viz.js](https://viz-js.com/) wrapper to render [DOT graphs](https://graphviz.org/doc/info/lang.html). (Framework Interoperability / Wrappers)
- fucking-awesome-angular - ngx-viz - Simple Angular 🌎 [viz.js](viz-js.com/) wrapper to render 🌎 [DOT graphs](graphviz.org/doc/info/lang.html). (Framework Interoperability / Wrappers)
README
# NgxViz
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.7.
This is a simple Angular [viz.js](https://viz-js.com) wrapper component to render [DOT graphs](https://graphviz.org/doc/info/lang.html).
## Setup
📦 `npm i @myrmidon/ngx-viz`.
## Usage
In your component template:
```html
```
where `graphCode` is the code to display, e.g.:
```ts
@Component({
// ...
imports: [
VizComponent
]
// ...
})
export class YourComponent {
graphCode = `
digraph {
A -> B;
B -> C;
C -> A;
}
`;
}
```
## History
- 2025-07-12: updated Angular and packages.
### 1.0.0
- 2025-07-03: ⚠️ updated to Angular 20.
### 0.0.3
- 2025-01-12: refactored script loading for Viz to handle the case where AMD module might already be present and prevent duplicate script loading.
### 0.0.2
- 2025-01-12: refactored script loading for Viz.
### 0.0.1
- 2025-01-11: initial commit.