[{"data":1,"prerenderedAt":448},["ShallowReactive",2],{"blog-post-/blog/de-de/how-to-render-and-export-mermaid-diagrams-online":3,"related-posts-/de-DE/blog/how-to-render-and-export-mermaid-diagrams-online":180},{"id":4,"title":5,"author":6,"body":7,"category":160,"date":161,"description":162,"extension":163,"featured":164,"image":165,"meta":166,"navigation":167,"path":168,"readingTime":169,"seo":170,"stem":171,"tags":172,"tools":177,"__hash__":179},"content/blog/de-DE/how-to-render-and-export-mermaid-diagrams-online.md","Mermaid-Diagramme online rendern und exportieren: Vom KI-Code zu scharfem SVG und PNG","Anything Tools Editorial",{"type":8,"value":9,"toc":151},"minimark",[10,14,27,32,41,63,66,70,76,106,110,113,132,136,144,148],[11,12,5],"h1",{"id":13},"mermaid-diagramme-online-rendern-und-exportieren-vom-ki-code-zu-scharfem-svg-und-png",[15,16,17,18,22,23,26],"p",{},"Sprachmodelle wie ChatGPT, Claude und DeepSeek entwerfen Systemarchitekturen, Sequenzdiagramme und Datenbankschemata mühelos in Mermaid-Syntax. Rohe Blöcke wie ",[19,20,21],"code",{},"flowchart TD"," oder ",[19,24,25],{},"sequenceDiagram"," lassen sich jedoch nicht direkt in Präsentationen, Word-Dokumente oder Kunden-PDFs einfügen. Um aus der Textdefinition eine saubere Grafik zu machen, braucht es eine direkte Live-Vorschau und einen verlässlichen Export.",[28,29,31],"h2",{"id":30},"diagramm-prüfen-und-typische-ki-syntaxfehler-beheben","Diagramm prüfen und typische KI-Syntaxfehler beheben",[15,33,34,35,40],{},"Fügen Sie Ihren Code in den ",[36,37,39],"a",{"href":38},"/dev/mermaid-renderer","Mermaid-Renderer"," ein, um das Diagramm sofort zu prüfen. Wenn KI-generierter Mermaid-Code einen Fehler wirft, liegt das fast immer an nicht maskierten Klammern oder Doppelpunkten innerhalb von Knotenbeschriftungen:",[42,43,44,55],"ul",{},[45,46,47,51,52],"li",{},[48,49,50],"strong",{},"Fehleranfällige Beschriftung",": ",[19,53,54],{},"A[Benutzer-Login (Admin)] --> B[Dashboard]",[45,56,57,51,60],{},[48,58,59],{},"Sichere Beschriftung mit Anführungszeichen",[19,61,62],{},"A[\"Benutzer-Login (Admin)\"] --> B[\"Dashboard\"]",[15,64,65],{},"Sobald Beschriftungen mit Sonderzeichen oder Klammern in doppelte Anführungszeichen gesetzt werden, interpretiert der Parser sie nicht mehr versehentlich als Knotenform.",[28,67,69],{"id":68},"passendes-theme-und-zeichenstil-auswählen","Passendes Theme und Zeichenstil auswählen",[15,71,72,73,75],{},"Ein Diagramm, das in einer dunklen Entwicklungsumgebung gut aussieht, verliert auf einer weißen Präsentationsfolie oft an Kontrast. Über die Werkzeugleiste im ",[36,74,39],{"href":38}," passen Sie die Darstellung vor dem Export an:",[77,78,79,100],"ol",{},[45,80,81,84,85,22,88,91,92,95,96,99],{},[48,82,83],{},"Farbschema (Theme)",": Nutzen Sie ",[19,86,87],{},"default",[19,89,90],{},"neutral"," für helle Folien und Druckdokumente, ",[19,93,94],{},"dark"," für dunkle Dashboards oder ",[19,97,98],{},"forest"," für ruhige Spezifikationen.",[45,101,102,105],{},[48,103,104],{},"Klassisch vs. Handgezeichnet (Look)",": Der klassische geometrische Stil eignet sich für finale Architekturen und ER-Diagramme; der handgezeichnete Stil hilft in frühen Konzeptphasen, den Fokus auf den Ablauf statt auf Layoutdetails zu lenken.",[28,107,109],{"id":108},"vektor-svg-oder-hochauflösendes-png-exportieren","Vektor-SVG oder hochauflösendes PNG exportieren",[15,111,112],{},"Das Zielmedium bestimmt das richtige Dateiformat:",[42,114,115,121],{},[45,116,117,120],{},[48,118,119],{},"SVG (Vektorgrafik)",": Ideal für technische Blogs, Dokumentationsseiten und Design-Tools wie Figma. Linien und Schriften bleiben bei jeder Skalierung gestochen scharf.",[45,122,123,126,127,131],{},[48,124,125],{},"PNG",": Optimal für PowerPoint, Google Slides, Slack, Jira und Word, wo SVGs häufig blockiert werden. Wenn Sie das PNG anschließend für schnelle Webseiten optimieren möchten, wandeln Sie es mit dem ",[36,128,130],{"href":129},"/image/converter","Bildkonverter"," in WebP oder AVIF um.",[28,133,135],{"id":134},"mit-markdown-workflows-kombinieren","Mit Markdown-Workflows kombinieren",[15,137,138,139,143],{},"Wenn Ihr Diagramm Teil einer größeren technischen Dokumentation ist, prüfen und exportieren Sie zuerst die Grafik und wandeln Sie den Fließtext anschließend mit dem ",[36,140,142],{"href":141},"/text/markdown-to-html","Markdown-zu-HTML-Konverter"," um. Bewahren Sie den Mermaid-Quelltext zusammen mit der Bilddatei im Repository auf, damit spätere Änderungen in Sekunden erledigt sind.",[28,145,147],{"id":146},"fazit","Fazit",[15,149,150],{},"Mermaid macht Diagramme versionierbar wie Quellcode, und ein Browser-Renderer liefert daraus sofort präsentationsreife Grafiken. Setzen Sie komplexe Knotenlabels in Anführungszeichen, stimmen Sie das Theme auf den Hintergrund ab und wählen Sie SVG oder PNG passend zum Zielsystem.",{"title":152,"searchDepth":153,"depth":153,"links":154},"",2,[155,156,157,158,159],{"id":30,"depth":153,"text":31},{"id":68,"depth":153,"text":69},{"id":108,"depth":153,"text":109},{"id":134,"depth":153,"text":135},{"id":146,"depth":153,"text":147},"Developer Tools","2026-10-27T00:00:00.000Z","Mermaid-Flussdiagramme, Sequenzdiagramme und ER-Modelle im Browser prüfen, Syntaxfehler beheben, Themes wechseln und als SVG oder PNG exportieren.","md",false,"/blog/how-to-render-and-export-mermaid-diagrams-online.png",{},true,"/blog/de-de/how-to-render-and-export-mermaid-diagrams-online",5,{"title":5,"description":162},"blog/de-DE/how-to-render-and-export-mermaid-diagrams-online",[173,174,175,176],"Mermaid renderer","diagram to SVG","flowchart","developer tools",[178,38,141,129],"/dev/svg-viewer","0NiOUqVALj3LML4QFoJlDLxSDYr-zqTrsP_qtaNfp1U",[181,249],{"id":182,"title":183,"author":6,"body":184,"category":160,"date":236,"description":237,"extension":163,"featured":164,"image":238,"meta":239,"navigation":167,"path":240,"readingTime":169,"seo":241,"stem":242,"tags":243,"tools":247,"__hash__":248},"content/blog/de-DE/convert-image-to-base64-guide.md","Convert Images to Base64: When It Helps and When It Hurts",{"type":8,"value":185,"toc":230},[186,189,192,195,208,211,218,221,224,227],[11,187,183],{"id":188},"convert-images-to-base64-when-it-helps-and-when-it-hurts",[15,190,191],{},"Base64 turns a small image into text that can be pasted into HTML, CSS, JSON, or a quick prototype. It is convenient, but it is not always faster or cleaner than linking a normal image file.",[28,193,194],{"id":194},"核心思路",[15,196,197,198,202,203,207],{},"Use the ",[36,199,201],{"href":200},"/dev/image-to-base64","Image to Base64"," tool when you need a tiny icon, a test fixture, or a self-contained snippet. If you only need to understand or decode a string, the ",[36,204,206],{"href":205},"/dev/base64","Base64 Encoder/Decoder"," is the simpler companion.",[28,209,210],{"id":210},"适用场景",[15,212,213,214,217],{},"The trade-off is size. Base64 usually makes binary data larger, and very long strings are hard to review in code. For photos, screenshots, or blog covers, keep a real file and optimize the format with the ",[36,215,216],{"href":129},"Image Converter",".",[28,219,220],{"id":220},"性能取舍",[15,222,223],{},"A practical rule: inline only small assets that truly need to travel with the document. Keep everything else as a separate image so browsers can cache it, designers can replace it, and reviewers can inspect changes.",[28,225,226],{"id":226},"最后检查",[15,228,229],{},"Before shipping, test the page on a slow connection and check that the source code remains readable. Base64 is a useful tool, not a default publishing format.",{"title":152,"searchDepth":153,"depth":153,"links":231},[232,233,234,235],{"id":194,"depth":153,"text":194},{"id":210,"depth":153,"text":210},{"id":220,"depth":153,"text":220},{"id":226,"depth":153,"text":226},"2026-08-14T00:00:00.000Z","Learn when Base64 image strings are useful for prototypes, emails, and small assets, plus when normal image files are better.","/blog/convert-image-to-base64-guide.png",{},"/blog/de-de/convert-image-to-base64-guide",{"title":183,"description":237},"blog/de-DE/convert-image-to-base64-guide",[244,245,176,246],"base64","image encoding","web performance",[200,205,129],"T9fy8iDSs-jO4VkKmehuIai9nm-fgE0ZjLx5T5-3BX4",{"id":250,"title":251,"author":6,"body":252,"category":160,"date":161,"description":436,"extension":163,"featured":164,"image":437,"meta":438,"navigation":167,"path":439,"readingTime":169,"seo":440,"stem":441,"tags":442,"tools":446,"__hash__":447},"content/blog/de-DE/how-to-convert-chatgpt-session-json-safely.md","ChatGPT-Session-JSON sicher im Browser konvertieren",{"type":8,"value":253,"toc":430},[254,257,279,283,286,315,328,332,366,389,393,399,403],[11,255,251],{"id":256},"chatgpt-session-json-sicher-im-browser-konvertieren",[15,258,259,260,263,264,267,268,267,271,274,275,278],{},"Wer selbst gehostete KI-Gateways, Coding-Assistenten oder Account-Pools verwaltet, muss häufig Rohdaten aus ",[19,261,262],{},"https://chatgpt.com/api/auth/session"," in das Konfigurationsschema des jeweiligen Zielsystems überführen. Felder wie ",[19,265,266],{},"accessToken",", ",[19,269,270],{},"sessionToken",[19,272,273],{},"refreshToken"," und ",[19,276,277],{},"account.id"," manuell aus Dutzenden JSON-Dateien zu kopieren ist fehleranfällig – und echte Zugangsdaten auf fremde Server hochzuladen ist ein erhebliches Sicherheitsrisiko.",[28,280,282],{"id":281},"was-in-einem-session-payload-steckt","Was in einem Session-Payload steckt",[15,284,285],{},"Eine typische ChatGPT-Session-Antwort enthält neben Metadaten hochsensible Authentifizierungsdaten:",[42,287,288,297,307],{},[45,289,290,296],{},[48,291,292,274,294],{},[19,293,266],{},[19,295,270],{},": Inhabertokens, die direkten Zugriff auf das Konto gewähren.",[45,298,299,306],{},[48,300,301,274,304],{},[19,302,303],{},"user.email",[19,305,277],{},": Kennungen zur Zuordnung und zum Routing innerhalb eines Gateways.",[45,308,309,314],{},[48,310,311],{},[19,312,313],{},"expires",": Der ISO-Zeitstempel für das Ablaufdatum der aktuellen Sitzung.",[15,316,317,318,322,323,327],{},"Vor der Umwandlung können Sie unübersichtliche Dateien im ",[36,319,321],{"href":320},"/dev/json-formatter","JSON-Formatter"," prüfen oder enthaltene Token-Claims samt Ablaufzeitpunkt im ",[36,324,326],{"href":325},"/dev/jwt-decoder","JWT-Decoder"," lokal auslesen.",[28,329,331],{"id":330},"einzelne-daten-oder-datei-batches-lokal-umwandeln","Einzelne Daten oder Datei-Batches lokal umwandeln",[15,333,334,335,339,340,267,343,267,346,267,349,267,352,267,355,22,358,361,362,365],{},"Öffnen Sie den ",[36,336,338],{"href":337},"/dev/chatgpt-session-converter","ChatGPT-Session-Konverter"," und wählen Sie oben das gewünschte Zielformat (",[19,341,342],{},"Sub2API",[19,344,345],{},"CPA",[19,347,348],{},"Cockpit",[19,350,351],{},"9Router",[19,353,354],{},"Codex",[19,356,357],{},"AxonHub",[19,359,360],{},"Codex-Manager","). Sie können JSON-Text direkt einfügen oder mehrere ",[19,363,364],{},".json","-Dateien per Drag-and-drop ablegen:",[77,367,368,374,380],{},[45,369,370,373],{},[48,371,372],{},"automatische Feldzuordnung",": E-Mail-Adresse, Account-ID, Ablaufdatum und Tokens werden automatisch aus Einzelobjekten oder Arrays extrahiert.",[45,375,376,379],{},[48,377,378],{},"Übersichtstabelle und Fehlerprüfung",": Eine Vorschautabelle zeigt alle erkannten Konten und meldet übersprungene Einträge, falls erforderliche Tokens fehlen.",[45,381,382,385,386,388],{},[48,383,384],{},"Direkter Export",": Kopieren Sie das fertige JSON in die Zwischenablage oder laden Sie die ",[19,387,364],{},"-Datei direkt herunter.",[28,390,392],{"id":391},"warum-lokale-browser-verarbeitung-entscheidend-ist","Warum lokale Browser-Verarbeitung entscheidend ist",[15,394,395,396,398],{},"Session- und Refresh-Tokens sind so sensibel wie Passwörter. Da der ",[36,397,338],{"href":337}," vollständig lokal im Browser-Tab ohne Netzwerkanfragen arbeitet, verlassen Ihre Zugangsdaten zu keinem Zeitpunkt Ihr Gerät.",[28,400,402],{"id":401},"tipps-vor-dem-gateway-import","Tipps vor dem Gateway-Import",[15,404,405,406,267,408,22,410,412,413,416,417,420,421,424,425,274,427,429],{},"Prüfen Sie vorab, ob Ihr Zielsystem (etwa ",[19,407,345],{},[19,409,348],{},[19,411,354],{},") zwingend ein ",[19,414,415],{},"refresh_token"," (",[19,418,419],{},"rt",") für die automatische Verlängerung benötigt, da der Standard-Aufruf von ",[19,422,423],{},"/api/auth/session"," im Browser oft nur ",[19,426,266],{},[19,428,270],{}," liefert. Speichern Sie exportierte Konfigurationsdateien stets verschlüsselt ab.",{"title":152,"searchDepth":153,"depth":153,"links":431},[432,433,434,435],{"id":281,"depth":153,"text":282},{"id":330,"depth":153,"text":331},{"id":391,"depth":153,"text":392},{"id":401,"depth":153,"text":402},"ChatGPT-Auth-Session-JSON lokal im Browser in Sub2API-, CPA-, Cockpit-, 9Router-, Codex- und AxonHub-Formate umwandeln, ohne Tokens preiszugeben.","/blog/how-to-convert-chatgpt-session-json-safely.png",{},"/blog/de-de/how-to-convert-chatgpt-session-json-safely",{"title":251,"description":436},"blog/de-DE/how-to-convert-chatgpt-session-json-safely",[443,444,445,176],"ChatGPT session converter","JSON","JWT",[337,325,320],"8Rj0TFNJo7zHz5l4qpWzsokgwsi3MCogFS5PG1_3zF0",1793096862499]