License: MIT | Version: 2.1.0
Create programming flowcharts with interactive tasks. Use standardized Elements such as loops and Branchings.
Snippets are examples and templates using the package's widgets.
| Name | Import Path |
|---|---|
| Erklaerung | @webwriter/flowchart/snippets/Erklaerung.html |
| For Schleife | @webwriter/flowchart/snippets/For-Schleife.html |
| If Else | @webwriter/flowchart/snippets/If-Else.html |
| Switch | @webwriter/flowchart/snippets/Switch.html |
| Kontextbeispiel | @webwriter/flowchart/snippets/Kontextbeispiel.html |
Use with a CDN (e.g. jsdelivr):
<linkhref="https://cdn.jsdelivr.net/npm/@webwriter/flowchart/widgets/webwriter-flowchart.css" rel="stylesheet"><scripttype="module" src="https://cdn.jsdelivr.net/npm/@webwriter/flowchart/widgets/webwriter-flowchart.js"></script><webwriter-flowchart></webwriter-flowchart>Or use with a bundler (e.g. Vite):
npm install @webwriter/flowchart
<linkhref="@webwriter/flowchart/widgets/webwriter-flowchart.css" rel="stylesheet"><scripttype="module" src="@webwriter/flowchart/widgets/webwriter-flowchart.js"></script><webwriter-flowchart></webwriter-flowchart>| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
localize | - | - | LOCALIZE | ✗ |
graphNodes (graphNodes) | GraphNode[] | Current list of graph nodes (programmatic API). | [] | ✓ |
arrows (arrows) | Arrow[] | Current list of arrows between nodes (programmatic API). | [] | ✗ |
getGraphNodes | - | Get the current nodes. | - | ✗ |
getArrows | - | Get the current arrows. | - | ✗ |
taskList (taskList) | ItemList[] | Tasks shown in the task menu. | [] | ✓ |
helpList (helpList) | ItemList[] | Hints shown in the help menu. | [] | ✓ |
height (height) | number | Canvas height (px). | 400 | ✓ |
zoomLevel (zoomLevel) | number | Current zoom percentage (50–200). | 100 | ✓ |
canvasOffsetX (canvasOffsetX) | number | Horizontal pan offset (world units). | 0 | ✓ |
canvasOffsetY (canvasOffsetY) | number | Vertical pan offset (world units). | 0 | ✓ |
disableStudentEdit (disableStudentEdit) | boolean | Disables interactive editing (adding/dragging/deleting). | false | ✓ |
disableStudentPan (disableStudentPan) | boolean | Disables panning/zooming interactions. | false | ✓ |
font (font) | string | Font family used for labels, spaces written as underscores. | 'Courier_New' | ✓ |
fontSize (fontSize) | number | Font size used for labels. | 16 | ✓ |
theme (theme) | string | Color theme name. | 'standard' | ✓ |
fullscreen (fullscreen) | boolean | Whether the widget is currently in fullscreen mode. | false | ✗ |
getSelectedSequence | - | Get the currently selected path sequence. | - | ✗ |
isSelectingSequence | - | Set path-selection mode. | - | ✗ |
solutionMessage (solutionMessage) | string | Message shown in the solution prompt. | '' | ✗ |
showSolution (showSolution) | boolean | Whether the solution prompt is visible. | false | ✗ |
setSelectedSequence | - | Programmatically set the selected path sequence. Overwrites the internal selectedSequence with the provided ordered descriptors. | - | ✗ |
Fields including properties and attributes define the current state of the widget and offer customization options.
| Name | Description | Parameters |
|---|---|---|
isEditable | Returns whether the widget is currently in an editable state based on the contenteditable attribute. | - |
selectSequence | Toggle path-selection mode for solution checking. When turning off the mode, clears the current selected sequence, ends a running task recording and drops any selected node/arrow/rectangle, then triggers a redraw. | - |
checkSolution | Compare the currently selected path sequence with a task's expected sequence. If length and element-wise id/type match, shows a success message; otherwise shows a failure message. Uses showSolutionWithMessage() to display the result. | task: ItemList |
Methods allow programmatic access to the widget.
| Name | Description |
|---|---|
| --offset-x | Internal canvas left offset (managed by the widget). |
| --offset-y | Internal canvas top offset (managed by the widget). |
| --widget-height | Workspace height in pixels. |
Custom CSS properties offer defined customization of the widget's style.
| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public slots, events, or CSS parts.
Generated with @webwriter/build@1.9.1