License: MIT | Version: 1.0.2
Visualize graphs, simulate common graph algorithms (Kruskal, Dijkstra, BFS, DFS, etc.), and record your own graph animations.
Snippets are examples and templates using the package's widgets.
| Name | Import Path |
|---|---|
| People | @webwriter/graph/snippets/people.html |
| Dijkstra | @webwriter/graph/snippets/dijkstra.html |
| Kruskal | @webwriter/graph/snippets/kruskal.html |
Use with a CDN (e.g. jsdelivr):
<linkhref="https://cdn.jsdelivr.net/npm/@webwriter/graph/widgets/ww-graph.css" rel="stylesheet"><scripttype="module" src="https://cdn.jsdelivr.net/npm/@webwriter/graph/widgets/ww-graph.js"></script><ww-graph></ww-graph>Or use with a bundler (e.g. Vite):
npm install @webwriter/graph
<linkhref="@webwriter/graph/widgets/ww-graph.css" rel="stylesheet"><scripttype="module" src="@webwriter/graph/widgets/ww-graph.js"></script><ww-graph></ww-graph>| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
graph (graph) | iGraph | The graph data, containing labeled nodes and weighted links. | - | ✓ |
animation (animation) | AnimationStep[] | Array of animation steps. Each step can color nodes/links, set node subtexts, or reset previous steps. | [] | ✓ |
permissions (permissions) | PermissionsType | Controls which features are available to the user (editing, algorithm execution, animation playback). | { general: { play: true, playbackRate: true, }, edit: { enabled: true, addNode: true, addEdge: true, editNode: true, editEdge: true, delNode: true, delEdge: true, }, algorithm: { enabled: true, executable: algorithms.map((a) => a.id), }, animation: { enabled: true, editStep: true, delStep: true, }, } | ✓ |
Fields including properties and attributes define the current state of the widget and offer customization options.
| Name | Description | Parameters |
|---|---|---|
animateStep | Applies a single animation step to the graph immediately. | step: AnimationStep, signal: AbortSignal |
previewStep | Shows the final state of a single animation step without playing the transition animation. Used when editing steps. | step: AnimationStep |
resetGraph | Resets the graph SVG layout by briefly clearing and restoring the graph data, triggering a re-render. | - |
executeAlgorithm | Runs the currently selected algorithm on the graph and starts playing the resulting animation. | - |
startAnimation | Starts or resumes the animation playback from the current position. | - |
Methods allow programmatic access to the widget.
| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public slots, events, custom CSS properties, or CSS parts.
Generated with @webwriter/build@1.9.1