StruktoLab

A free, web-based structogram (Nassi-Shneiderman diagram) editor with automatic code generation. Built entirely with web components — no framework dependencies.

Features

• 📝 Bidirectional pseudocode editing (visual ↔ text)
• 🌍 German and English pseudocode support
• 💻 Code generation for Python, Java, and JavaScript
• 💾 Save/Load as JSON
• 🖼 Export as PNG or SVG image
• 🔗 Shareable URLs (state compressed in URL hash, compatible with struktolab.openpatch.org)
• 📦 Web components — embed anywhere with zero dependencies

Web Components

<struktolab-editor>

Full-featured visual editor with toolbar, pseudocode sync, and import/export.

<script src="https://cdn.jsdelivr.net/npm/struktolab/dist/editor/struktolab-editor.umd.min.js"></script>

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

<!-- With German pseudocode -->
<struktolab-editor font-size="14">
  <script type="text/pseudocode">
    eingabe("Zahl n")
    ergebnis = 1
    wiederhole für i = 1 bis n:
        ergebnis = ergebnis * i
    ausgabe(ergebnis)
  </script>
</struktolab-editor>

<!-- With English 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>

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

Attributes

| Attribute | Description | Default | |-------------|------------------------------------|---------| | width | Fixed width in pixels | auto | | font-size | Font size in pixels | 14 | | lang | Pseudocode language (de or en) | de | | src | URL to a JSON tree file | — | | color-mode | Color mode (color, bw) | color |

JavaScript API

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

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

// Pseudocode
editor.pseudocode = 'eingabe("Zahl n")';

// 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 image
const pngBlob = await editor.exportImage('png');
const svgBlob = await editor.exportImage('svg');

// Programmatic update
editor.change({ type: "TaskNode", text: "updated" });

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

<struktolab-renderer>

Read-only SVG renderer for displaying structograms.

<script src="https://cdn.jsdelivr.net/npm/struktolab/dist/renderer/struktolab-renderer.umd.min.js"></script>

<struktolab-renderer font-size="14">
  <script type="text/pseudocode">
    falls x > 0:
        ausgabe("positiv")
    sonst:
        ausgabe("nicht positiv")
  </script>
</struktolab-renderer>

Same attributes and tree format as the editor.

Shareable URLs

StruktoLab supports shareable URLs with the structogram state compressed in the URL hash using pako (zlib). This is compatible with existing URLs from struktolab.openpatch.org.

Example:

https://example.com/#pako:eNqlkstuE0EQRf-l166kH9Ov2UaJ...

The state is updated automatically as you edit.

Development

Prerequisites

• Node.js (v14+)
• npm

Setup

git clone https://github.com/openpatch/struktolab.git
cd struktog
npm install

Dev Server

npm run dev

Production Build

# App (index.html + bundled editor)
npm run build

# Component libraries (UMD + ES modules)
npm run build:renderer
npm run build:editor

# All at once
npm run build:all

Outputs:

• build/ — app with index.html
• dist/renderer/ — struktolab-renderer.umd.js / .es.js
• dist/editor/ — struktolab-editor.umd.js / .es.js

Supported Node Types

| Node | Description | |------|-------------| | Task | Simple statement | | Input | Read input | | Output | Write output | | If/Else | Two-way branch | | Switch/Case | Multi-way branch | | While | Head-controlled loop | | Do-While | Foot-controlled loop | | For | Counter-controlled loop | | Function | Function definition | | Try/Catch | Exception handling |

License

MIT — see license.md

Credits

Based on the original structogram editor by Didaktik der Informatik, TU Dresden.