@webwriter/flowchart

Flowchart (@webwriter/flowchart@2.0.9)

License: MIT | Version: 2.0.9

Create programming flowcharts with interactive tasks. Use standardized Elements such as loops and Branchings.

Snippets

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

FlowchartWidget (<webwriter-flowchart>)

Usage

Use with a CDN (e.g. jsdelivr):

<link href="https://cdn.jsdelivr.net/npm/@webwriter/flowchart/widgets/webwriter-flowchart.css" rel="stylesheet">
<script type="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

<link href="@webwriter/flowchart/widgets/webwriter-flowchart.css" rel="stylesheet">
<script type="module" src="@webwriter/flowchart/widgets/webwriter-flowchart.js"></script>
<webwriter-flowchart></webwriter-flowchart>

Fields

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	✓
allowStudentEdit (allowStudentEdit)	boolean	Allow interactive editing (adding/dragging/deleting).	false	✓
allowStudentPan (allowStudentPan)	boolean	Allow panning/zooming interactions.	false	✓
font (font)	string	Font family used for labels.	'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.	-	✗
getActiveSequenceButton	-	Get the active sequence button.	-	✗
setActiveSequenceButton	-	Set the active sequence button.	-	✗
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.

Methods

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 and any selected node/arrow/rectangle, then triggers a redraw. Also toggles the active class on the #select-button element (if present).	-
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.

Custom CSS properties

Name	Description
--scaled-grid-size	Spacing between grid dots (derived from zoom).
--scaled-grid-dot-size	Dot radius for the background grid (derived from zoom).
--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.

CSS parts

Name	Description
options	Styles the settings sidebar (tool menu).

CSS parts allow freely styling internals of the widget with CSS.

Editing config

Name	Value

The editing config defines how explorable authoring tools such as WebWriter treat the widget.

No public slots, or events.

Generated with @webwriter/build@1.9.0