[{"data":1,"prerenderedAt":451},["ShallowReactive",2],{"blog-post-/blog/zh-tw/how-to-render-and-export-mermaid-diagrams-online":3,"related-posts-/zh-TW/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-TW/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 規劃系統架構、API 循序圖或資料庫結構時，模型常會直接產生 Mermaid 語法。不過，原始的 ",[19,20,21],"code",{},"flowchart TD"," 或 ",[19,24,25],{},"sequenceDiagram"," 區塊無法直接放進簡報、Word 報告或不支援語法渲染的平台。透過瀏覽器即時預覽與匯出工具，就能快速把文字定義轉成可直接交付的圖表檔案。",[28,29,31],"h2",{"id":30},"即時預覽並排解-ai-產生的語法錯誤","即時預覽並排解 AI 產生的語法錯誤",[15,33,34,35,40],{},"將程式碼貼入 ",[36,37,39],"a",{"href":38},"/dev/mermaid-renderer","Mermaid 線上渲染器"," 後，右側面板會立即繪製圖表。若出現解析錯誤，最常見的原因是節點標籤中包含了未加引號的括號、中括號或冒號：",[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],{},"在深色編輯器裡清晰的圖表，放到白色簡報背景上可能會顯得對比不足。匯出前，可先在 ",[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 圖適合經典幾何線條；初期產品討論則可切換為手繪風格，讓團隊聚焦於流程邏輯。",[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（點陣圖）","：適合 PowerPoint、Google 簡報、Word、Slack 與工單系統。若要將匯出的 PNG 用於網站文章並縮小檔案體積，可再透過",[36,131,133],{"href":132},"/image/converter","圖片格式轉換器","轉為 WebP 或 AVIF。",[28,136,138],{"id":137},"搭配-markdown-發布工作流","搭配 Markdown 發布工作流",[15,140,141,142,146],{},"若圖表屬於完整技術文件的一部分，可先在渲染器中確認圖表並匯出圖檔，再透過 ",[36,143,145],{"href":144},"/text/markdown-to-html","Markdown 轉 HTML 工具","轉換正文。建議同時在專案中保留原始 Mermaid 原始碼，日後流程異動時只需修改幾行文字即可重新匯出。",[28,148,149],{"id":149},"結語",[15,151,152],{},"Mermaid 讓圖表具備版本控制與快速修改的優勢，而線上渲染器則能將純文字語法轉為乾淨的視覺資產。善用雙引號避免語法錯誤、挑選合適主題，並依載體選擇 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-tw/how-to-render-and-export-mermaid-diagrams-online",5,{"title":5,"description":164},"blog/zh-TW/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","x0qmlhAk8DNM9WHqVPJhMKJv4gaAx7kekoc8lVIHtGE",[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",1793096572620]