StruktoLab

Pseudocode Reference

StruktoLab uses a simple pseudocode syntax to define structograms. Two languages are supported: German (default) and English. Indentation (4 spaces) defines nesting.

Statements

// Task (any plain statement)
ergebnis = 1

// Input
eingabe("Zahl n")

// Output
ausgabe("Ergebnis")

// Task (any plain statement)
result = 1

// Input
input("number n")

// Output
output("result")

Branching (If/Else)

falls x > 0:
    ausgabe("positiv")
sonst:
    ausgabe("nicht positiv")

if x > 0:
    output("positive")
else:
    output("not positive")

Switch / Case

unterscheide farbe:
    fall "rot":
        ausgabe("stopp")
    fall "grün":
        ausgabe("los")
    sonst:
        ausgabe("unbekannt")

switch color:
    case "red":
        output("stop")
    case "green":
        output("go")
    else:
        output("unknown")

Loops

// Count loop (for)
wiederhole für i = 1 bis 10:
    ausgabe(i)

// Head loop (while)
wiederhole solange x > 0:
    x = x - 1

// Foot loop (do-while)
wiederhole:
    eingabe("Wert")
solange wert != 0

// Count loop (for)
repeat for i = 1 to 10:
    output(i)

// Head loop (while)
repeat while x > 0:
    x = x - 1

// Foot loop (do-while)
repeat:
    input("value")
while value != 0

Functions

funktion factorial(n):
    falls n <= 1:
        ergebnis = 1
    sonst:
        ergebnis = n * factorial(n - 1)

function factorial(n):
    if n <= 1:
        result = 1
    else:
        result = n * factorial(n - 1)

Try / Catch

versuche:
    x = parse(eingabe)
fange Exception e:
    ausgabe("Fehler")

try:
    x = parse(input)
catch Exception e:
    output("error")

Line Breaks

Use \n in node text for manual line breaks within a single node. In the visual editor, press Shift+Enter while editing a node.

Keyword Reference

Web Components

<struktolab-editor>

A full-featured visual structogram editor with toolbar, pseudocode sync, and import/export.

Basic Usage

<!-- Load the script -->
<script src="struktolab-editor.js"></script>

<!-- Empty editor -->
<struktolab-editor font-size="14"></struktolab-editor>

<!-- With pseudocode -->
<struktolab-editor font-size="14" lang="en">
  <script type="text/pseudocode">
    input("number n")
    result = 1
    repeat for i = 1 to n:
        result = result * i
    output(result)
  </script>
</struktolab-editor>

<!-- With JSON -->
<struktolab-editor font-size="14">
  <script type="application/json">
    { "type": "TaskNode", "text": "x = 42" }
  </script>
</struktolab-editor>

<!-- From external JSON file -->
<struktolab-editor src="my-diagram.json"></struktolab-editor>

Attributes

JavaScript API

const editor = document.querySelector('struktolab-editor');

// Get / set the tree object
editor.tree = { type: "TaskNode", text: "hello" };
console.log(editor.tree);

// Set from pseudocode string
editor.pseudocode = 'input("name")\noutput("Hello " + name)';

// Code generation
editor.toCode('python');     // → Python code
editor.toCode('java');       // → Java code
editor.toCode('javascript'); // → JavaScript code

// Save / Load JSON (clean, no internal IDs)
const json = editor.saveJSON();
editor.loadJSON(json);

// Export as image
const pngBlob = await editor.exportImage('png');
const svgBlob = await editor.exportImage('svg');

// Programmatic update (re-renders + emits change event)
editor.change({ type: "TaskNode", text: "updated" });

// Listen for changes
editor.addEventListener('change', (e) => {
  console.log('Tree changed:', e.detail.tree);
});

<struktolab-renderer>

A read-only SVG renderer for displaying structograms. Same attributes and tree format as the editor, but without editing capabilities.

<script src="struktolab-renderer.js"></script>

<struktolab-renderer font-size="14" lang="en">
  <script type="text/pseudocode">
    if x > 0:
        output("positive")
    else:
        output("not positive")
  </script>
</struktolab-renderer>

Renderer API

const renderer = document.querySelector('struktolab-renderer');

// Set tree or pseudocode
renderer.tree = { type: "TaskNode", text: "hello" };
renderer.pseudocode = 'output("hello")';

// Code generation
renderer.toCode('python');

JSON Tree Format

The tree is a nested JSON structure. Each node has a type, optional text, and a followElement for the next sibling.

Node Types

Example

{
  "type": "BranchNode",
  "text": "x > 0",
  "columnWidths": [0.6, 0.4],
  "trueChild": {
    "type": "OutputNode",
    "text": "positive"
  },
  "falseChild": {
    "type": "OutputNode",
    "text": "not positive"
  },
  "followElement": {
    "type": "TaskNode",
    "text": "done"
  }
}

Shareable URLs

StruktoLab encodes the entire structogram state in the URL hash using pako (zlib compression). This makes diagrams shareable via a single link — no server required.

URLs from struktolab.openpatch.org are compatible and can be opened directly.

Format: #pako:<base64url-compressed-json>

The compressed JSON contains:

{
  "origin": "https://example.com",
  "version": 2,
  "model": { /* tree JSON */ },
  "settings": { "lang": "de", "fontSize": "14" }
}