[{"data":1,"prerenderedAt":451},["ShallowReactive",2],{"blog-post-/blog/zh-cn/how-to-render-and-export-mermaid-diagrams-online":3,"related-posts-/zh-CN/blog/how-to-render-and-export-mermaid-diagrams-online":182},{"id":4,"title":5,"author":6,"body":7,"category":162,"date":163,"description":164,"extension":165,"featured":166,"image":167,"meta":168,"navigation":169,"path":170,"readingTime":171,"seo":172,"stem":173,"tags":174,"tools":179,"__hash__":181},"content/blog/zh-CN/how-to-render-and-export-mermaid-diagrams-online.md","如何在线渲染与导出 Mermaid 图表：将 AI 代码转化为高清 SVG 与 PNG","Anything Tools Editorial",{"type":8,"value":9,"toc":153},"minimark",[10,14,27,32,41,63,70,73,79,109,113,116,135,139,147,150],[11,12,5],"h1",{"id":13},"如何在线渲染与导出-mermaid-图表将-ai-代码转化为高清-svg-与-png",[15,16,17,18,22,23,26],"p",{},"如今使用 ChatGPT、Claude 或 DeepSeek 梳理系统架构、接口时序或数据库表结构时，大模型通常会直接输出一段 Mermaid 代码。然而，原始的 ",[19,20,21],"code",{},"flowchart TD"," 或 ",[19,24,25],{},"sequenceDiagram"," 文本无法直接贴进 PPT 汇报材料、Word 文档或不支持代码渲染的知识库。将这些纯文本定义快速转化为清晰的图表文件，需要一套即贴即看、支持多格式导出的在线工作流。",[28,29,31],"h2",{"id":30},"实时预览并快速修复-ai-生成的语法错误","实时预览并快速修复 AI 生成的语法错误",[15,33,34,35,40],{},"将代码粘贴到 ",[36,37,39],"a",{"href":38},"/dev/mermaid-renderer","Mermaid 在线渲染器"," 后，右侧画布会立即生成可视化图表。如果遇到语法报错，90% 以上的原因是 AI 在节点文字里直接使用了未加引号的括号、方括号或冒号：",[42,43,44,55],"ul",{},[45,46,47,51,52],"li",{},[48,49,50],"strong",{},"容易报错的写法","：",[19,53,54],{},"A[用户登录 (管理员)] --> B[控制台]",[45,56,57,51,60],{},[48,58,59],{},"安全的双引号写法",[19,61,62],{},"A[\"用户登录 (管理员)\"] --> B[\"控制台\"]",[15,64,65,66,69],{},"只要将包含特殊符号、空格或中英文混排的节点文案用英文双引号 ",[19,67,68],{},"\"\""," 包裹起来，就能彻底避免解析器将圆括号误判为特殊节点形状。",[28,71,72],{"id":72},"根据交付场景切换主题与手绘风格",[15,74,75,76,78],{},"深色背景下好看的图表，直接放进白底 PPT 往往会出现字迹偏淡或对比度不足的问题。在导出前，可以通过 ",[36,77,39],{"href":38}," 顶部工具栏调整外观：",[80,81,82,103],"ol",{},[45,83,84,87,88,22,91,94,95,98,99,102],{},[48,85,86],{},"配色主题（Theme）","：撰写正式技术方案或打印文档时建议选择 ",[19,89,90],{},"default",[19,92,93],{},"neutral","；制作深色模式演示文稿时选择 ",[19,96,97],{},"dark","；需要柔和视觉效果时可尝试 ",[19,100,101],{},"forest","。",[45,104,105,108],{},[48,106,107],{},"标准外观与手绘模式（Look）","：架构定稿与数据库 ER 图适合严谨的经典几何线条；而在早期需求评审或头脑风暴阶段，切换为手绘风格（Hand-drawn）能让团队更专注于业务逻辑本身。",[28,110,112],{"id":111},"选择矢量-svg-还是高清-png","选择矢量 SVG 还是高清 PNG？",[15,114,115],{},"不同文档载体对图片格式的支持差异很大：",[42,117,118,124],{},[45,119,120,123],{},[48,121,122],{},"导出 SVG（矢量图）","：适合放入技术博客、前端组件、Figma 设计稿或支持矢量图的文档系统，任意放大都不会产生锯齿。",[45,125,126,129,130,134],{},[48,127,128],{},"导出 PNG（位图）","：适合插入飞书/钉钉文档、微信群聊、PPT、Word 或 Jira 工单。如果后续需要将导出的图表用于网页性能优化，还可以配合",[36,131,133],{"href":132},"/image/converter","图片格式转换器","将其转为体积更小的 WebP 或 AVIF 格式。",[28,136,138],{"id":137},"与-markdown-文档发布流结合","与 Markdown 文档发布流结合",[15,140,141,142,146],{},"当你在编写包含大量图表的 Markdown 技术文档时，可以先在渲染器中校准流程图并导出图像，再使用 ",[36,143,145],{"href":144},"/text/markdown-to-html","Markdown 转 HTML 工具","整理正文排版。建议在代码仓库或文档注释中保留原始 Mermaid 源码，下次业务流程变更时只需改几行文字即可重新生成新图。",[28,148,149],{"id":149},"结语",[15,151,152],{},"Mermaid 让画图具备了代码一样的可维护性，而浏览器端渲染器则打通了从“AI 生成代码”到“高清交付物”的最后一公里。养成给特殊节点加双引号的习惯，按背景挑选主题，并根据目标平台按需导出 SVG 或 PNG，能让技术沟通更加高效。",{"title":154,"searchDepth":155,"depth":155,"links":156},"",2,[157,158,159,160,161],{"id":30,"depth":155,"text":31},{"id":72,"depth":155,"text":72},{"id":111,"depth":155,"text":112},{"id":137,"depth":155,"text":138},{"id":149,"depth":155,"text":149},"Developer Tools","2026-10-27T00:00:00.000Z","在浏览器中实时预览 Mermaid 流程图、时序图与 ER 图，排查常见语法报错，切换主题风格并一键导出高清 SVG 或 PNG。","md",false,"/blog/how-to-render-and-export-mermaid-diagrams-online.png",{},true,"/blog/zh-cn/how-to-render-and-export-mermaid-diagrams-online",5,{"title":5,"description":164},"blog/zh-CN/how-to-render-and-export-mermaid-diagrams-online",[175,176,177,178],"Mermaid renderer","diagram to SVG","flowchart","developer tools",[180,38,144,132],"/dev/svg-viewer","h7BhBYx74CI10LRQDCur0Z5V6AIfZGXQhUAfF_8GdoU",[183,251],{"id":184,"title":185,"author":6,"body":186,"category":162,"date":238,"description":239,"extension":165,"featured":166,"image":240,"meta":241,"navigation":169,"path":242,"readingTime":171,"seo":243,"stem":244,"tags":245,"tools":249,"__hash__":250},"content/blog/de-DE/convert-image-to-base64-guide.md","Convert Images to Base64: When It Helps and When It Hurts",{"type":8,"value":187,"toc":232},[188,191,194,197,210,213,220,223,226,229],[11,189,185],{"id":190},"convert-images-to-base64-when-it-helps-and-when-it-hurts",[15,192,193],{},"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,195,196],{"id":196},"核心思路",[15,198,199,200,204,205,209],{},"Use the ",[36,201,203],{"href":202},"/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,206,208],{"href":207},"/dev/base64","Base64 Encoder/Decoder"," is the simpler companion.",[28,211,212],{"id":212},"适用场景",[15,214,215,216,219],{},"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,217,218],{"href":132},"Image Converter",".",[28,221,222],{"id":222},"性能取舍",[15,224,225],{},"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,227,228],{"id":228},"最后检查",[15,230,231],{},"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":154,"searchDepth":155,"depth":155,"links":233},[234,235,236,237],{"id":196,"depth":155,"text":196},{"id":212,"depth":155,"text":212},{"id":222,"depth":155,"text":222},{"id":228,"depth":155,"text":228},"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":185,"description":239},"blog/de-DE/convert-image-to-base64-guide",[246,247,178,248],"base64","image encoding","web performance",[202,207,132],"T9fy8iDSs-jO4VkKmehuIai9nm-fgE0ZjLx5T5-3BX4",{"id":252,"title":253,"author":6,"body":254,"category":162,"date":163,"description":439,"extension":165,"featured":166,"image":440,"meta":441,"navigation":169,"path":442,"readingTime":171,"seo":443,"stem":444,"tags":445,"tools":449,"__hash__":450},"content/blog/de-DE/how-to-convert-chatgpt-session-json-safely.md","ChatGPT-Session-JSON sicher im Browser konvertieren",{"type":8,"value":255,"toc":433},[256,259,281,285,288,317,330,334,369,392,396,402,406],[11,257,253],{"id":258},"chatgpt-session-json-sicher-im-browser-konvertieren",[15,260,261,262,265,266,269,270,269,273,276,277,280],{},"Wer selbst gehostete KI-Gateways, Coding-Assistenten oder Account-Pools verwaltet, muss häufig Rohdaten aus ",[19,263,264],{},"https://chatgpt.com/api/auth/session"," in das Konfigurationsschema des jeweiligen Zielsystems überführen. Felder wie ",[19,267,268],{},"accessToken",", ",[19,271,272],{},"sessionToken",[19,274,275],{},"refreshToken"," und ",[19,278,279],{},"account.id"," manuell aus Dutzenden JSON-Dateien zu kopieren ist fehleranfällig – und echte Zugangsdaten auf fremde Server hochzuladen ist ein erhebliches Sicherheitsrisiko.",[28,282,284],{"id":283},"was-in-einem-session-payload-steckt","Was in einem Session-Payload steckt",[15,286,287],{},"Eine typische ChatGPT-Session-Antwort enthält neben Metadaten hochsensible Authentifizierungsdaten:",[42,289,290,299,309],{},[45,291,292,298],{},[48,293,294,276,296],{},[19,295,268],{},[19,297,272],{},": Inhabertokens, die direkten Zugriff auf das Konto gewähren.",[45,300,301,308],{},[48,302,303,276,306],{},[19,304,305],{},"user.email",[19,307,279],{},": Kennungen zur Zuordnung und zum Routing innerhalb eines Gateways.",[45,310,311,316],{},[48,312,313],{},[19,314,315],{},"expires",": Der ISO-Zeitstempel für das Ablaufdatum der aktuellen Sitzung.",[15,318,319,320,324,325,329],{},"Vor der Umwandlung können Sie unübersichtliche Dateien im ",[36,321,323],{"href":322},"/dev/json-formatter","JSON-Formatter"," prüfen oder enthaltene Token-Claims samt Ablaufzeitpunkt im ",[36,326,328],{"href":327},"/dev/jwt-decoder","JWT-Decoder"," lokal auslesen.",[28,331,333],{"id":332},"einzelne-daten-oder-datei-batches-lokal-umwandeln","Einzelne Daten oder Datei-Batches lokal umwandeln",[15,335,336,337,341,342,269,345,269,348,269,351,269,354,269,357,360,361,364,365,368],{},"Öffnen Sie den ",[36,338,340],{"href":339},"/dev/chatgpt-session-converter","ChatGPT-Session-Konverter"," und wählen Sie oben das gewünschte Zielformat (",[19,343,344],{},"Sub2API",[19,346,347],{},"CPA",[19,349,350],{},"Cockpit",[19,352,353],{},"9Router",[19,355,356],{},"Codex",[19,358,359],{},"AxonHub"," oder ",[19,362,363],{},"Codex-Manager","). Sie können JSON-Text direkt einfügen oder mehrere ",[19,366,367],{},".json","-Dateien per Drag-and-drop ablegen:",[80,370,371,377,383],{},[45,372,373,376],{},[48,374,375],{},"automatische Feldzuordnung",": E-Mail-Adresse, Account-ID, Ablaufdatum und Tokens werden automatisch aus Einzelobjekten oder Arrays extrahiert.",[45,378,379,382],{},[48,380,381],{},"Übersichtstabelle und Fehlerprüfung",": Eine Vorschautabelle zeigt alle erkannten Konten und meldet übersprungene Einträge, falls erforderliche Tokens fehlen.",[45,384,385,388,389,391],{},[48,386,387],{},"Direkter Export",": Kopieren Sie das fertige JSON in die Zwischenablage oder laden Sie die ",[19,390,367],{},"-Datei direkt herunter.",[28,393,395],{"id":394},"warum-lokale-browser-verarbeitung-entscheidend-ist","Warum lokale Browser-Verarbeitung entscheidend ist",[15,397,398,399,401],{},"Session- und Refresh-Tokens sind so sensibel wie Passwörter. Da der ",[36,400,340],{"href":339}," vollständig lokal im Browser-Tab ohne Netzwerkanfragen arbeitet, verlassen Ihre Zugangsdaten zu keinem Zeitpunkt Ihr Gerät.",[28,403,405],{"id":404},"tipps-vor-dem-gateway-import","Tipps vor dem Gateway-Import",[15,407,408,409,269,411,360,413,415,416,419,420,423,424,427,428,276,430,432],{},"Prüfen Sie vorab, ob Ihr Zielsystem (etwa ",[19,410,347],{},[19,412,350],{},[19,414,356],{},") zwingend ein ",[19,417,418],{},"refresh_token"," (",[19,421,422],{},"rt",") für die automatische Verlängerung benötigt, da der Standard-Aufruf von ",[19,425,426],{},"/api/auth/session"," im Browser oft nur ",[19,429,268],{},[19,431,272],{}," liefert. Speichern Sie exportierte Konfigurationsdateien stets verschlüsselt ab.",{"title":154,"searchDepth":155,"depth":155,"links":434},[435,436,437,438],{"id":283,"depth":155,"text":284},{"id":332,"depth":155,"text":333},{"id":394,"depth":155,"text":395},{"id":404,"depth":155,"text":405},"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":253,"description":439},"blog/de-DE/how-to-convert-chatgpt-session-json-safely",[446,447,448,178],"ChatGPT session converter","JSON","JWT",[339,327,322],"8Rj0TFNJo7zHz5l4qpWzsokgwsi3MCogFS5PG1_3zF0",1793096497979]