Bilder, Zeichnungen, Diagramme

Ziehen, loslassen, fertig. Aber ein paar von Eduskripts Bildfunktionen gehen über die Grundlagen hinaus — theme-fähige Excalidraw-Zeichnungen, die mit Light-/Dark-Mode wechseln (inklusive AI-generierter Diagramme), eine kuratierte Farbpalette, die in beiden Themes lesbar bleibt, invert für handgezeichnete Schwarz-auf-Weiss-Skizzen, und Mermaid für Diagramme, die du lieber beschreibst als zeichnest.

Bilder hinzufügen

Drag and drop

Zieh eine beliebige Bilddatei (PNG, JPG, WebP, GIF, SVG) in den Editor. Sie wird in den Dateispeicher deines Skripts hochgeladen, und das Markdown wird automatisch an deiner Cursorposition eingefügt.

Markdown-Syntax

![Bildunterschrift](my-image.png)

Der Alt-Text wird zur sichtbaren Bildunterschrift unter dem Bild. Schreib aus Gründen der Zugänglichkeit etwas Beschreibendes — Schüler, die Screenreader nutzen, sind darauf angewiesen.

HTML-Syntax mit Attributen

Für mehr Kontrolle nutze das <image>-Tag:

<image src="my-image.png" width="50%" align="right" wrap ></image>

Beim Hovern über ein Bild in der Live-Vorschau erscheinen Grössenanpassungs-Griffe und eine Ausrichtungs-Toolbar — meist schneller, als Attribute zu tippen.

Excalidraw — theme-fähige Diagramme

Excalidraw ist ein Skizzier-Tool mit handgezeichneter Ästhetik. Eduskript integriert es tief — inklusive eines eingebauten Editors (die Seite muss nicht verlassen werden) und automatischem Theme-Wechsel: Du lieferst sowohl ein Light-Mode- als auch ein Dark-Mode-SVG, und Eduskript liefert das passende, je nach Theme des Schülers, aus.

Der schnelle Weg: Editor direkt auf der Seite

Klick auf den Excalidraw-Button in der Toolbar → öffnet eine Zeichenfläche inline. Skizzier dein Diagramm, klick Save. Eduskript:

1. Erzeugt zwei SVGs (Light- und Dark-Theme)
2. Lädt beide in deine Skript-Dateien hoch
3. Fügt die Markdown-Referenz für dich ein

Das ist der gesamte Workflow. Die Zeichnung bleibt bearbeitbar — klick sie später in der Vorschau an, um den Editor wieder zu öffnen.

Ein Diagramm aus einem Prompt generieren

Der Excalidraw-Editor direkt auf der Seite kann auch einen ersten Entwurf aus einem AI-Prompt erzeugen — beschreib das Diagramm, das du willst, lass es die AI skizzieren, und passe das Ergebnis danach von Hand an, wie jede andere Excalidraw-Zeichnung.

Der manuelle Weg: externes Excalidraw

Bevorzugst du Excalidraws eigenständige Web-App oder Desktop-App:

1. Zeichne dein Diagramm auf excalidraw.com
2. Export → SVG, mit Light-Theme → speichern als mydiagram.excalidraw.light.svg
3. Zeichenfläche auf Dark-Theme umstellen, erneut exportieren → mydiagram.excalidraw.dark.svg
4. Beide Dateien in dein Skript hochladen
5. In Markdown referenzieren:

![Eine Bildunterschrift für Screenreader](mydiagram.excalidraw)

Eduskript sucht die .light.svg- / .dark.svg-Geschwisterdateien automatisch. Die .excalidraw-Referenz ist symbolisch — es gibt keine echte .excalidraw-Datei (nur die zwei SVGs).

Wann Excalidraw statt anderer Diagramm-Tools

Excalidraw eignet sich besonders für

• Algorithmus-Flussdiagramme und Zustandsdiagramme
• Datenbank-ER-Diagramme (automatisch erkannt neben SQL-Editoren — siehe SQL Studio)
• Konzeptkarten und Mindmaps
• Netzwerktopologien, UML-Klassendiagramme
• Alles, wo ein skizzenhafter/handgezeichneter Look besser passt als CAD-Präzision

Excalidraw eignet sich weniger für

• Fotos (nutze JPG)
• Pixelgenaue Diagramme (nutze ein Vektor-Tool wie Figma oder Inkscape)
• Sehr grosse Diagramme, die nicht in eine normale Seitenbreite passen

Mermaid-Diagramme

Für Flussdiagramme, Sequenzdiagramme und andere strukturierte Diagramme rendert Eduskript auch Mermaid nativ — eine textbasierte Diagramm-Syntax, theme-fähig wie alles andere:

```mermaid
flowchart LR
    A[Start] --> B{Condition}
    B -->|yes| C[Do X]
    B -->|no| D[Do Y]
```

Die meisten Lehrpersonen schreiben Mermaid-Syntax nicht von Hand. Beschreib dem AI-Edit-Chat das gewünschte Diagramm — „zeichne ein Flussdiagramm des obigen Algorithmus" — und er schreibt den ```mermaid-Block für dich. Passe den generierten Code danach an, falls er nicht ganz stimmt.

Theme-fähige benannte Farben

Farben in Markdown sind eine Usability-Falle — #00BFFF sieht auf Weiss toll aus und verschwindet auf Schwarz. Eduskript liefert eine kuratierte Farbpalette, bei der jede benannte Farbe separate Light-Mode- und Dark-Mode-Werte hat, gewählt für Lesbarkeit in beiden.

Im Fliesstext

Die Toolbar hat eine Textfarben- und Highlight-Auswahl. Entweder klickst du eine Farbe aus der Palette an, oder du schreibst die Spans von Hand:

Das Ergebnis ist <span class="es-color-cyan">42</span>, zur Betonung
<span class="es-bg-yellow">gelb hervorgehoben</span>.

Verfügbare Textfarben (es-color-*): cyan, lightgreen, green, orange, red, blue, violet, purple, lightblue, pink, yellow, white, black, gray.

Verfügbare Highlights (es-bg-*): yellow, green, blue, pink, orange, red, purple.

Jede wechselt automatisch ihren Farbton, wenn der Schüler zwischen Light- und Dark-Mode umschaltet.

In Mathe (KaTeX)

KaTeX' \textcolor-Befehl akzeptiert dieselben Farbnamen:

$$\textcolor{cyan}{x}^2 + \textcolor{orange}{y}^2 = \textcolor{lightgreen}{r}^2$$

Das rendert die Gleichung mit x in cyan, y in orange, r in lightgreen — und alle drei wechseln beim Theme-Umschalten zu ihren dark-mode-freundlichen Varianten.

Eigene Hex-Farben

Die „Custom color..."-Auswahl in der Toolbar erzeugt einen einfachen Inline-Style-Span mit einem fixen Hex-Code. Das funktioniert, passt sich aber nicht dem Theme an — wähl aus der Palette, wenn du Lesbarkeit über beide Themes hinweg willst.

Handgezeichnete Skizzen im Dark Mode invertieren

Du hast ein Foto der Wandtafel gescannt oder eine Skizze auf weissem Papier gezeichnet. Im Light Mode sieht sie toll aus. Im Dark Mode ist sie ein grell weisser Block.

Lösung: invert hinzufügen:

<image src="chalk-sketch.jpg" invert ></image>

Im Dark Mode wird das Bild automatisch invertiert (Weiss wird dunkel, Schwarz wird hell). Funktioniert am besten bei kontrastreichem Schwarz-auf-Weiss-Inhalt wie Skizzen, gescannten Diagrammen und Stift-auf-Papier-Notizen.

Unterstützte Formate

Für Videos siehe das Kapitel Video — sie werden separat über Mux gehandhabt.

Bild- und Diagramm-Spickzettel