[{"data":1,"prerenderedAt":447},["ShallowReactive",2],{"blog-post-/blog/en/how-to-render-and-export-mermaid-diagrams-online":3,"related-posts-/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/en/how-to-render-and-export-mermaid-diagrams-online.md","How to Render and Export Mermaid Diagrams Online: From AI Code to Clean SVG and 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},"how-to-render-and-export-mermaid-diagrams-online-from-ai-code-to-clean-svg-and-png",[15,16,17,18,22,23,26],"p",{},"Large language models like ChatGPT, Claude, and DeepSeek are great at drafting system architectures, sequence flows, and database schemas in Mermaid syntax. However, raw ",[19,20,21],"code",{},"flowchart TD"," or ",[19,24,25],{},"sequenceDiagram"," blocks cannot be dropped directly into slide decks, Notion pages without Mermaid support, or client PDFs. Turning that text definition into a polished visual asset requires a fast live preview and reliable export pipeline.",[28,29,31],"h2",{"id":30},"preview-the-diagram-and-catch-syntax-errors-early","Preview the Diagram and Catch Syntax Errors Early",[15,33,34,35,40],{},"Paste your Mermaid snippet into the ",[36,37,39],"a",{"href":38},"/dev/mermaid-renderer","Mermaid Renderer"," to inspect the rendered graph immediately. When an AI assistant generates invalid Mermaid syntax, it is almost always caused by unescaped parentheses, brackets, or colons inside node labels:",[42,43,44,55],"ul",{},[45,46,47,51,52],"li",{},[48,49,50],"strong",{},"Broken label",": ",[19,53,54],{},"A[User (Admin) Login] --> B[Dashboard]",[45,56,57,51,60],{},[48,58,59],{},"Safe quoted label",[19,61,62],{},"A[\"User (Admin) Login\"] --> B[\"Dashboard\"]",[15,64,65],{},"Wrapping any label that contains punctuation or CJK characters in double quotes eliminates parser errors while keeping the source readable.",[28,67,69],{"id":68},"choose-the-right-theme-and-visual-look","Choose the Right Theme and Visual Look",[15,71,72,73,75],{},"A diagram meant for a dark IDE README rarely reads well on a white slide deck. Before exporting, use the toolbar controls in the ",[36,74,39],{"href":38}," to switch between:",[77,78,79,100],"ol",{},[45,80,81,84,85,22,88,91,92,95,96,99],{},[48,82,83],{},"Theme presets",": Pick ",[19,86,87],{},"default",[19,89,90],{},"neutral"," for printed documentation and light slides, ",[19,93,94],{},"dark"," for dark-mode dashboards, or ",[19,97,98],{},"forest"," for calmer technical specs.",[45,101,102,105],{},[48,103,104],{},"Classic vs. Hand-Drawn look",": Use the classic geometric style for architecture diagrams and ERDs, or switch to the hand-drawn style during early product brainstorming so stakeholders focus on flow rather than pixel perfection.",[28,107,109],{"id":108},"export-vector-svg-vs-high-dpi-png","Export Vector SVG vs. High-DPI PNG",[15,111,112],{},"Choosing the right output format prevents blurry text after you embed the diagram:",[42,114,115,121],{},[45,116,117,120],{},[48,118,119],{},"SVG (Scalable Vector Graphics)",": Best for technical blogs, documentation portals, and design tools like Figma. Vector paths stay razor-sharp at any zoom level.",[45,122,123,126,127,131],{},[48,124,125],{},"PNG",": Best for Google Slides, PowerPoint, Slack, Jira tickets, and Word documents where inline SVGs are blocked or stripped. If you later need WebP or AVIF for faster web delivery, pass the exported PNG through the ",[36,128,130],{"href":129},"/image/converter","Image Converter",".",[28,133,135],{"id":134},"combine-diagrams-with-markdown-publishing-workflows","Combine Diagrams with Markdown Publishing Workflows",[15,137,138,139,143],{},"If your Mermaid block lives inside a larger technical specification, preview the diagram first, export the asset, and convert the surrounding prose with the ",[36,140,142],{"href":141},"/text/markdown-to-html","Markdown to HTML Converter",". Keeping the Mermaid source alongside the exported image in your repository ensures future edits take seconds instead of redrawing boxes from scratch.",[28,145,147],{"id":146},"conclusion","Conclusion",[15,149,150],{},"Mermaid turns diagramming into version-controlled text, and a browser renderer bridges the gap between raw syntax and presentation-ready visuals. Quote special characters in node labels, match the theme to your destination surface, and export SVG or PNG based on where the diagram will be read.",{"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","Preview Mermaid flowcharts, sequence diagrams, and ERDs in the browser, fix common syntax errors, switch themes, and export crisp SVG or PNG files.","md",false,"/blog/how-to-render-and-export-mermaid-diagrams-online.png",{},true,"/blog/en/how-to-render-and-export-mermaid-diagrams-online",5,{"title":5,"description":162},"blog/en/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","iczfRlK933jiMB3xx2dx5p5GxIeBMa-9x-sh5BC3nFY",[181,247],{"id":182,"title":183,"author":6,"body":184,"category":160,"date":234,"description":235,"extension":163,"featured":164,"image":236,"meta":237,"navigation":167,"path":238,"readingTime":169,"seo":239,"stem":240,"tags":241,"tools":245,"__hash__":246},"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":228},[186,189,192,195,208,211,216,219,222,225],[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,131],{},"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,130],{"href":129},[28,217,218],{"id":218},"性能取舍",[15,220,221],{},"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,223,224],{"id":224},"最后检查",[15,226,227],{},"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":229},[230,231,232,233],{"id":194,"depth":153,"text":194},{"id":210,"depth":153,"text":210},{"id":218,"depth":153,"text":218},{"id":224,"depth":153,"text":224},"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":235},"blog/de-DE/convert-image-to-base64-guide",[242,243,176,244],"base64","image encoding","web performance",[200,205,129],"T9fy8iDSs-jO4VkKmehuIai9nm-fgE0ZjLx5T5-3BX4",{"id":248,"title":249,"author":6,"body":250,"category":160,"date":161,"description":435,"extension":163,"featured":164,"image":436,"meta":437,"navigation":167,"path":438,"readingTime":169,"seo":439,"stem":440,"tags":441,"tools":445,"__hash__":446},"content/blog/de-DE/how-to-convert-chatgpt-session-json-safely.md","ChatGPT-Session-JSON sicher im Browser konvertieren",{"type":8,"value":251,"toc":429},[252,255,277,281,284,313,326,330,365,388,392,398,402],[11,253,249],{"id":254},"chatgpt-session-json-sicher-im-browser-konvertieren",[15,256,257,258,261,262,265,266,265,269,272,273,276],{},"Wer selbst gehostete KI-Gateways, Coding-Assistenten oder Account-Pools verwaltet, muss häufig Rohdaten aus ",[19,259,260],{},"https://chatgpt.com/api/auth/session"," in das Konfigurationsschema des jeweiligen Zielsystems überführen. Felder wie ",[19,263,264],{},"accessToken",", ",[19,267,268],{},"sessionToken",[19,270,271],{},"refreshToken"," und ",[19,274,275],{},"account.id"," manuell aus Dutzenden JSON-Dateien zu kopieren ist fehleranfällig – und echte Zugangsdaten auf fremde Server hochzuladen ist ein erhebliches Sicherheitsrisiko.",[28,278,280],{"id":279},"was-in-einem-session-payload-steckt","Was in einem Session-Payload steckt",[15,282,283],{},"Eine typische ChatGPT-Session-Antwort enthält neben Metadaten hochsensible Authentifizierungsdaten:",[42,285,286,295,305],{},[45,287,288,294],{},[48,289,290,272,292],{},[19,291,264],{},[19,293,268],{},": Inhabertokens, die direkten Zugriff auf das Konto gewähren.",[45,296,297,304],{},[48,298,299,272,302],{},[19,300,301],{},"user.email",[19,303,275],{},": Kennungen zur Zuordnung und zum Routing innerhalb eines Gateways.",[45,306,307,312],{},[48,308,309],{},[19,310,311],{},"expires",": Der ISO-Zeitstempel für das Ablaufdatum der aktuellen Sitzung.",[15,314,315,316,320,321,325],{},"Vor der Umwandlung können Sie unübersichtliche Dateien im ",[36,317,319],{"href":318},"/dev/json-formatter","JSON-Formatter"," prüfen oder enthaltene Token-Claims samt Ablaufzeitpunkt im ",[36,322,324],{"href":323},"/dev/jwt-decoder","JWT-Decoder"," lokal auslesen.",[28,327,329],{"id":328},"einzelne-daten-oder-datei-batches-lokal-umwandeln","Einzelne Daten oder Datei-Batches lokal umwandeln",[15,331,332,333,337,338,265,341,265,344,265,347,265,350,265,353,356,357,360,361,364],{},"Öffnen Sie den ",[36,334,336],{"href":335},"/dev/chatgpt-session-converter","ChatGPT-Session-Konverter"," und wählen Sie oben das gewünschte Zielformat (",[19,339,340],{},"Sub2API",[19,342,343],{},"CPA",[19,345,346],{},"Cockpit",[19,348,349],{},"9Router",[19,351,352],{},"Codex",[19,354,355],{},"AxonHub"," oder ",[19,358,359],{},"Codex-Manager","). Sie können JSON-Text direkt einfügen oder mehrere ",[19,362,363],{},".json","-Dateien per Drag-and-drop ablegen:",[77,366,367,373,379],{},[45,368,369,372],{},[48,370,371],{},"automatische Feldzuordnung",": E-Mail-Adresse, Account-ID, Ablaufdatum und Tokens werden automatisch aus Einzelobjekten oder Arrays extrahiert.",[45,374,375,378],{},[48,376,377],{},"Übersichtstabelle und Fehlerprüfung",": Eine Vorschautabelle zeigt alle erkannten Konten und meldet übersprungene Einträge, falls erforderliche Tokens fehlen.",[45,380,381,384,385,387],{},[48,382,383],{},"Direkter Export",": Kopieren Sie das fertige JSON in die Zwischenablage oder laden Sie die ",[19,386,363],{},"-Datei direkt herunter.",[28,389,391],{"id":390},"warum-lokale-browser-verarbeitung-entscheidend-ist","Warum lokale Browser-Verarbeitung entscheidend ist",[15,393,394,395,397],{},"Session- und Refresh-Tokens sind so sensibel wie Passwörter. Da der ",[36,396,336],{"href":335}," vollständig lokal im Browser-Tab ohne Netzwerkanfragen arbeitet, verlassen Ihre Zugangsdaten zu keinem Zeitpunkt Ihr Gerät.",[28,399,401],{"id":400},"tipps-vor-dem-gateway-import","Tipps vor dem Gateway-Import",[15,403,404,405,265,407,356,409,411,412,415,416,419,420,423,424,272,426,428],{},"Prüfen Sie vorab, ob Ihr Zielsystem (etwa ",[19,406,343],{},[19,408,346],{},[19,410,352],{},") zwingend ein ",[19,413,414],{},"refresh_token"," (",[19,417,418],{},"rt",") für die automatische Verlängerung benötigt, da der Standard-Aufruf von ",[19,421,422],{},"/api/auth/session"," im Browser oft nur ",[19,425,264],{},[19,427,268],{}," liefert. Speichern Sie exportierte Konfigurationsdateien stets verschlüsselt ab.",{"title":152,"searchDepth":153,"depth":153,"links":430},[431,432,433,434],{"id":279,"depth":153,"text":280},{"id":328,"depth":153,"text":329},{"id":390,"depth":153,"text":391},{"id":400,"depth":153,"text":401},"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":249,"description":435},"blog/de-DE/how-to-convert-chatgpt-session-json-safely",[442,443,444,176],"ChatGPT session converter","JSON","JWT",[335,323,318],"8Rj0TFNJo7zHz5l4qpWzsokgwsi3MCogFS5PG1_3zF0",1793096421464]