Charts, QR-Codes und Formeln in einem Markdown-Dokument: ein praktischer Rundgang

Maschinendokumentation, Monatsberichte, technische Anhänge: Echte Geschäftsdokumente bestehen selten nur aus Fließtext. Hier eine Kennzahlenkurve, dort eine Formel, und immer öfter ein QR-Code, der vom Papier zur Live-Datenansicht führt. Im klassischen Markdown-Workflow bedeutet jedes dieser Elemente einen Umweg: Diagramm in einem separaten Tool rendern, PNG exportieren, einbetten — und nach jeder Datenänderung die Schleife erneut durchlaufen. Konverter wie Pandoc — am 8. Oktober 2026 erschien Version 3.12.1 mit dem neuen FODT-Format, in den Release Notes beschrieben als „a flattened representation of an ODT in a single XML file“ — bewegen Inhalte zwischen Dutzenden Formaten. Aber ein Konverter transportiert, was bereits existiert; er erzeugt weder das Diagramm noch den QR-Code noch die gesetzte Formel aus deiner Dokumentquelle.

Genau diese Lücke schließt Autype: Charts, QR-Codes, Formeln und Diagramme sind gleichberechtigte Elemente des Extended-Markdown-Dokumentmodells. Du beschreibst ein Diagramm als Daten, einen QR-Code über seine Nutzdaten, eine Formel als LaTeX — und jeder Export rendert sie nativ, ob PDF, DOCX oder HTML. Dieser Rundgang stellt die vier Elementfamilien vor, nennt die Stolperfallen und endet mit einem Muster für Dokumente, die sich selbst neu erzeugen.

Wo plain Markdown an seine Grenzen stößt

Drei Lücken öffnen sich, sobald ein Dokument mehr ist als Prosa:

1. Charts haben keine Syntax. Markdown definiert keine Möglichkeit, eine Datenreihe auszudrücken; das Diagramm lebt deshalb immer außerhalb des Dokuments — in einer Tabelle, einem BI-Tool oder einer selbst verdrahteten Chartbibliothek.
2. QR-Codes sind immer Screenshots. Der Code wird in einem Webtool erzeugt, heruntergeladen, eingebettet. Ändert sich die Ziel-URL, ist das Bild im Dokument still und leise veraltet.
3. Formeln hängen vom Renderer ab. Der eine Viewer zeigt die LaTeX-Quelle, der nächste rendert sie, der Word-Export braucht wieder OMML. Die Formel überlebt, ihre Darstellung nicht.

Die gemeinsame Wurzel: Diese Elemente sind in das Dokument eingefügte Assets, nicht Teile davon. Die JSON-Syntax von Autype dreht das um — jedes Element ist ein typisierter Block mit eigenen Eigenschaften, Defaults und Exportverhalten (Referenz der Media-Elemente).

Das chart-Element: Chart.js als Dokumentbaustein

Unter der Haube spricht das chart-Element die Konfiguration von Chart.js — dem Vokabular einer der verbreitetsten Open-Source-Chartbibliotheken (Chart.js-Dokumentation):

{
  "type": "chart",
  "config": {
    "type": "line",
    "data": {
      "labels": ["Jan", "Feb", "Mrz", "Apr"],
      "datasets": [{ "label": "Anfragen/s", "data": [1200, 1500, 1800, 2100] }]
    }
  },
  "width": 500,
  "height": 300,
  "caption": "Durchsatz je Monat"
}

Acht Diagrammtypen stehen zur Verfügung: line, bar, pie, doughnut, radar, polarArea, scatter und bubble. Zwei Eigenschaften tragen die Praxis:

• {{Variablen}}-Substitution. Labels und Datenwerte dürfen Template-Variablen referenzieren. Das Diagramm rendert dann, was der jeweilige Job übergibt — heute die Januardaten, im nächsten Monat die des Februar, ohne dass jemand die Chart-Konfiguration anfasst.
• defaults.chart.colors. Eine Palette für das gesamte Dokument; jedes Diagramm erbt sie. Die Firmenfarben leben in der Vorlage, nicht im einzelnen Chart.

Das Ergebnis ist ein Diagramm, das zur Generierungszeit an Daten gebunden und im Export eingefroren wird — genau das, was ein gedruckter Bericht braucht.

QR-Codes: vier Nutzdatentypen, vier Aufgaben

Das qrcode-Element erzeugt den Code zur Exportzeit aus seinen Nutzdaten, nie als eingefügtes Bild. Vier qrType-Werte decken die Praxis ab:

• url — die klassische Brücke vom Papier ins Web: Der Code in der Maschinenanleitung öffnet die jeweils aktuelle Doku-Seite.
• wifi — Netzwerkname, Passwort, Verschlüsselung; Hardware-Handzettel, mit denen Techniker ohne Tippen ins Werknetz kommen.
• vcard — Kontaktdaten auf der letzten Seite eines Angebots: einmal scannen, und der Projektansprechpartner ist im Telefon.
• text — beliebige Nutzdaten bis 2.000 Zeichen, für Seriennummern, Lizenzschlüssel oder Chargenbezeichner.

Zwei Eigenschaften entscheiden über die Scanbarkeit: size (50–1000 px) und errorCorrection — L (7 %), M (15 %), Q (25 %) oder H (30 %). Faustregel: Auf dem Bildschirm reicht meist M; für Druck, der verschmutzen oder schräg fotografiert werden kann, wähle Q oder H mit großzügiger Größe — und akzeptiere ein dichteres Muster.

Mathematik: LaTeX-Formeln, die jeden Export überstehen

Das math-Element rendert eine LaTeX-Gleichung auf Blockebene; latex nimmt bis zu 5.000 Zeichen, align steuert die Ausrichtung:

{
  "type": "math",
  "latex": "\\int_{0}^{\\infty} e^{-x^2}\\,dx = \\frac{\\sqrt{\\pi}}{2}",
  "align": "center"
}

Die ehrliche Einschränkung zuerst: Inline-Formeln im Absatz werden nicht unterstützt. Formeln sind immer eigenständige Blöcke. Braucht ein Satz eine Formel, halte den Satz kurz und setze die Gleichung direkt darunter — in der Praxis erhöht das ohnehin die Lesbarkeit. Für gemischte Zielformate rendert renderAsImage die Gleichung als Bild; so bleiben Word und PDF optisch identisch, selbst wo sich die native Formelunterstützung der Formate unterscheidet. Müssen Formeln auch mit Screenreadern funktionieren, lies unseren Artikel zu PDF/UA-2 und barrierefreier Mathematik.

Der stille Vierte: siebzehn Diagrammsprachen

Eigentlich kommen Diagramme gratis mit: Ein code-Block, dessen language eine der 17 unterstützten Diagrammsprachen ist — von mermaid, plantuml und graphviz über structurizr, dbml und vega bis tikz und wireviz —, wird standardmäßig als Bild gerendert (renderAsImage: true). Auf false gesetzt, erscheint derselbe Block stattdessen als nummeriertes Quelllisting. Architekturskizze und Quelle bleiben an einem Ort, und Leser sehen beide stets konsistent.

Welches Element für welchen Inhalt?

Inhalt	Element	Zentrale Eigenschaften	Achtung
Kennzahlenkurven, Vergleiche, Verteilungen	chart	8 Chart.js-Typen, {{Variablen}}, defaults.chart.colors	Statisch im Export — keine Interaktivität im PDF
Brücke vom Papier ins Web	qrcode (url)	size 50–1000, errorCorrection L–H	Scan in der endgültigen Druckgröße testen
Netzwerk oder Kontakt vor Ort	qrcode (wifi/vcard)	typisierte Nutzdaten je Fall	Passwörter in WiFi-Codes reisen im Klartext
Formel, Modell, Herleitung	math	LaTeX-Block, bis 5.000 Zeichen, renderAsImage	Keine Inline-Formeln im Absatz
Flussdiagramm, ER-Modell, Kabelplan	code + Diagrammsprache	17 Sprachen, renderAsImage	false macht aus der Abbildung ein Listing

Nummerierung ohne Handarbeit

Jedes visuelle Element akzeptiert caption und anchor. Elemente mit Caption werden automatisch nummeriert — „Abbildung 1“, „Listing 1“ — und fließen in das Abbildungs- bzw. Code-Verzeichnis des Exports ein. Über den anchor ist das Element aus dem Fließtext referenzierbar. Wer nach dem Einfügen eines neuen Diagramms in Kapitel zwei je Abbildungen von Hand neu nummeriert hat, weiß, warum das in den Generator gehört — nicht in den Autor.

Eine Quelle, Dokumente, die sich selbst neu erzeugen

Setzt du die Teile zusammen, wird ein Monatsbericht zur Vorlage: Variablen oben ({{monat}}, {{umsatz}}, {{reportUrl}}), ein Diagramm, dessen Dataset sie liest, ein QR-Code, dessen url dieselbe Variable ist, der Kommentar als Text. Kombiniert mit der Bulk-Generierung — eine Vorlage, bis zu 100 personalisierte Dokumente pro Job aus CSV oder Excel — schreibt sich der Bericht je Region von selbst (so funktioniert Bulk-PDF aus CSV). Den Satz-Aspekt dieses Ansatzes im Vergleich zu Typst und LaTeX behandelt unser Stack-Vergleich für 2026.

Checkliste vor der Veröffentlichung

• Charts: Variablen gebunden, Palette über defaults.chart.colors gesetzt?
• QR: size und errorCorrection auf Druck oder Bildschirm abgestimmt, Scan in Endgröße getestet?
• Mathematik: Formeln als Blöcke, renderAsImage für einheitliche Exporte?
• Diagramme: renderAsImage bewusst gesetzt, Captions und Anker für Querverweise?
• Quellen: Abbildungen und Listings benannt, damit die Verzeichnisse im Export nützlich bleiben?

Ein Dokument, das seine Visualisierungen als Daten beschreibt, ist nie „fast fertig“ — es wird erzeugt. Und dieser Unterschied zahlt sich bei jeder Datenaktualisierung ein.

Quellen (abgerufen am 9. Oktober 2026):

• Autype-Dokumentation, Media-Elemente (chart, qrcode, math, code/diagrams): https://docs.autype.com/api-reference/json-syntax/sections/media.md
• Pandoc Release Notes, Version 3.12.1, 8. Oktober 2026: https://github.com/jgm/pandoc/releases
• Chart.js-Dokumentation: https://www.chartjs.org/docs/latest/