[{"data":1,"prerenderedAt":450},["ShallowReactive",2],{"blog-post-/blog/ja-jp/how-to-render-and-export-mermaid-diagrams-online":3,"related-posts-/ja-JP/blog/how-to-render-and-export-mermaid-diagrams-online":181},{"id":4,"title":5,"author":6,"body":7,"category":161,"date":162,"description":163,"extension":164,"featured":165,"image":166,"meta":167,"navigation":168,"path":169,"readingTime":170,"seo":171,"stem":172,"tags":173,"tools":178,"__hash__":180},"content/blog/ja-JP/how-to-render-and-export-mermaid-diagrams-online.md","Mermaid 図をオンラインでレンダリング・書き出しする方法：AI コードから鮮明な SVG・PNG へ","Anything Tools Editorial",{"type":8,"value":9,"toc":152},"minimark",[10,14,27,31,39,61,68,71,77,108,112,115,134,138,146,149],[11,12,5],"h1",{"id":13},"mermaid-図をオンラインでレンダリング書き出しする方法ai-コードから鮮明な-svgpng-へ",[15,16,17,18,22,23,26],"p",{},"ChatGPT や Claude、DeepSeek などの AI にシステム構成図やシーケンス図、ER 図の作成を依頼すると、多くの場合 Mermaid 記法のコードが出力されます。しかし、",[19,20,21],"code",{},"flowchart TD"," や ",[19,24,25],{},"sequenceDiagram"," のテキストそのままでは PowerPoint スライドや Word 文書、チャットツールに貼り付けることができません。コードから共有可能な画像ファイルへ素早く変換するには、リアルタイムプレビューと書き出しに対応したブラウザツールが便利です。",[28,29,30],"h2",{"id":30},"ライブプレビューで構文エラーを即座に修正する",[15,32,33,38],{},[34,35,37],"a",{"href":36},"/dev/mermaid-renderer","Mermaid レンダラー"," にコードを貼り付けると、右側のキャンバスに図が即座に描画されます。AI が生成したコードで構文エラーが出る場合、最も多い原因はノード名に含まれる括弧やコロンが引用符で囲まれていないことです。",[40,41,42,53],"ul",{},[43,44,45,49,50],"li",{},[46,47,48],"strong",{},"エラーになりやすい例",": ",[19,51,52],{},"A[ユーザーログイン (管理者)] --> B[ダッシュボード]",[43,54,55,49,58],{},[46,56,57],{},"安全な記述例",[19,59,60],{},"A[\"ユーザーログイン (管理者)\"] --> B[\"ダッシュボード\"]",[15,62,63,64,67],{},"記号やスペースを含むラベルをダブルクォーテーション ",[19,65,66],{},"\"\""," で囲むだけで、パーサーの誤認識を防ぎ、日本語ラベルも安定して表示できます。",[28,69,70],{"id":70},"用途に合わせてテーマと描画スタイルを切り替える",[15,72,73,74,76],{},"暗い画面で見やすい図でも、白いスライドに貼ると線が薄く見えることがあります。書き出す前に ",[34,75,37],{"href":36}," のツールバーで見た目を調整しましょう。",[78,79,80,102],"ol",{},[43,81,82,85,86,89,90,93,94,97,98,101],{},[46,83,84],{},"テーマ（Theme）",": 仕様書や白背景のスライドには ",[19,87,88],{},"default"," または ",[19,91,92],{},"neutral","、ダークモードの資料には ",[19,95,96],{},"dark","、落ち着いた配色には ",[19,99,100],{},"forest"," が適しています。",[43,103,104,107],{},[46,105,106],{},"スタイル（Look）",": アーキテクチャ図や ER 図には整ったクラシック表示を使い、企画初期のラフな議論では手書き風（Hand-drawn）に切り替えると、細部ではなく全体の流れに集中しやすくなります。",[28,109,111],{"id":110},"ベクター-svg-と高解像度-png-の使い分け","ベクター SVG と高解像度 PNG の使い分け",[15,113,114],{},"貼り付け先の環境に応じて書き出し形式を選びます。",[40,116,117,123],{},[43,118,119,122],{},[46,120,121],{},"SVG（ベクター形式）",": 技術ブログ、ドキュメントサイト、Figma での再編集に最適です。どれだけ拡大しても文字や線がぼやけません。",[43,124,125,128,129,133],{},[46,126,127],{},"PNG（画像形式）",": PowerPoint、Google スライド、Word、Slack、Jira など、SVG の直接貼り付けに制限があるツールに向いています。Web ページ掲載用にさらに軽量化したい場合は、",[34,130,132],{"href":131},"/image/converter","画像変換ツール","で WebP や AVIF に変換すると効果的です。",[28,135,137],{"id":136},"markdown-ドキュメント制作と連携する","Markdown ドキュメント制作と連携する",[15,139,140,141,145],{},"仕様書全体の Markdown 原稿を作成している場合は、図を個別に確認・書き出したうえで、本文を ",[34,142,144],{"href":143},"/text/markdown-to-html","Markdown HTML 変換ツール","で整形するとスムーズです。元の Mermaid コードもリポジトリやドキュメント内に残しておけば、仕様変更時も数行書き換えるだけで図を更新できます。",[28,147,148],{"id":148},"まとめ",[15,150,151],{},"Mermaid を使えば図表をテキストとして管理でき、オンラインレンダラーを使えば必要な時にすぐ SVG や PNG として書き出せます。ラベルの引用符、背景に合ったテーマ選び、用途に応じたフォーマット選択を押さえて、わかりやすい技術資料を効率よく作成しましょう。",{"title":153,"searchDepth":154,"depth":154,"links":155},"",2,[156,157,158,159,160],{"id":30,"depth":154,"text":30},{"id":70,"depth":154,"text":70},{"id":110,"depth":154,"text":111},{"id":136,"depth":154,"text":137},{"id":148,"depth":154,"text":148},"Developer Tools","2026-10-27T00:00:00.000Z","ブラウザ上で Mermaid のフローチャートやシーケンス図をリアルタイムプレビューし、構文エラーの修正やテーマ変更、SVG・PNG 書き出しを行う実践ガイド。","md",false,"/blog/how-to-render-and-export-mermaid-diagrams-online.png",{},true,"/blog/ja-jp/how-to-render-and-export-mermaid-diagrams-online",5,{"title":5,"description":163},"blog/ja-JP/how-to-render-and-export-mermaid-diagrams-online",[174,175,176,177],"Mermaid renderer","diagram to SVG","flowchart","developer tools",[179,36,143,131],"/dev/svg-viewer","RODmacDqdUiwRa-2QsakAX1Oxei99L26Wfhc8tf2E78",[182,250],{"id":183,"title":184,"author":6,"body":185,"category":161,"date":237,"description":238,"extension":164,"featured":165,"image":239,"meta":240,"navigation":168,"path":241,"readingTime":170,"seo":242,"stem":243,"tags":244,"tools":248,"__hash__":249},"content/blog/de-DE/convert-image-to-base64-guide.md","Convert Images to Base64: When It Helps and When It Hurts",{"type":8,"value":186,"toc":231},[187,190,193,196,209,212,219,222,225,228],[11,188,184],{"id":189},"convert-images-to-base64-when-it-helps-and-when-it-hurts",[15,191,192],{},"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,194,195],{"id":195},"核心思路",[15,197,198,199,203,204,208],{},"Use the ",[34,200,202],{"href":201},"/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 ",[34,205,207],{"href":206},"/dev/base64","Base64 Encoder/Decoder"," is the simpler companion.",[28,210,211],{"id":211},"适用场景",[15,213,214,215,218],{},"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 ",[34,216,217],{"href":131},"Image Converter",".",[28,220,221],{"id":221},"性能取舍",[15,223,224],{},"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,226,227],{"id":227},"最后检查",[15,229,230],{},"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":153,"searchDepth":154,"depth":154,"links":232},[233,234,235,236],{"id":195,"depth":154,"text":195},{"id":211,"depth":154,"text":211},{"id":221,"depth":154,"text":221},{"id":227,"depth":154,"text":227},"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":184,"description":238},"blog/de-DE/convert-image-to-base64-guide",[245,246,177,247],"base64","image encoding","web performance",[201,206,131],"T9fy8iDSs-jO4VkKmehuIai9nm-fgE0ZjLx5T5-3BX4",{"id":251,"title":252,"author":6,"body":253,"category":161,"date":162,"description":438,"extension":164,"featured":165,"image":439,"meta":440,"navigation":168,"path":441,"readingTime":170,"seo":442,"stem":443,"tags":444,"tools":448,"__hash__":449},"content/blog/de-DE/how-to-convert-chatgpt-session-json-safely.md","ChatGPT-Session-JSON sicher im Browser konvertieren",{"type":8,"value":254,"toc":432},[255,258,280,284,287,316,329,333,368,391,395,401,405],[11,256,252],{"id":257},"chatgpt-session-json-sicher-im-browser-konvertieren",[15,259,260,261,264,265,268,269,268,272,275,276,279],{},"Wer selbst gehostete KI-Gateways, Coding-Assistenten oder Account-Pools verwaltet, muss häufig Rohdaten aus ",[19,262,263],{},"https://chatgpt.com/api/auth/session"," in das Konfigurationsschema des jeweiligen Zielsystems überführen. Felder wie ",[19,266,267],{},"accessToken",", ",[19,270,271],{},"sessionToken",[19,273,274],{},"refreshToken"," und ",[19,277,278],{},"account.id"," manuell aus Dutzenden JSON-Dateien zu kopieren ist fehleranfällig – und echte Zugangsdaten auf fremde Server hochzuladen ist ein erhebliches Sicherheitsrisiko.",[28,281,283],{"id":282},"was-in-einem-session-payload-steckt","Was in einem Session-Payload steckt",[15,285,286],{},"Eine typische ChatGPT-Session-Antwort enthält neben Metadaten hochsensible Authentifizierungsdaten:",[40,288,289,298,308],{},[43,290,291,297],{},[46,292,293,275,295],{},[19,294,267],{},[19,296,271],{},": Inhabertokens, die direkten Zugriff auf das Konto gewähren.",[43,299,300,307],{},[46,301,302,275,305],{},[19,303,304],{},"user.email",[19,306,278],{},": Kennungen zur Zuordnung und zum Routing innerhalb eines Gateways.",[43,309,310,315],{},[46,311,312],{},[19,313,314],{},"expires",": Der ISO-Zeitstempel für das Ablaufdatum der aktuellen Sitzung.",[15,317,318,319,323,324,328],{},"Vor der Umwandlung können Sie unübersichtliche Dateien im ",[34,320,322],{"href":321},"/dev/json-formatter","JSON-Formatter"," prüfen oder enthaltene Token-Claims samt Ablaufzeitpunkt im ",[34,325,327],{"href":326},"/dev/jwt-decoder","JWT-Decoder"," lokal auslesen.",[28,330,332],{"id":331},"einzelne-daten-oder-datei-batches-lokal-umwandeln","Einzelne Daten oder Datei-Batches lokal umwandeln",[15,334,335,336,340,341,268,344,268,347,268,350,268,353,268,356,359,360,363,364,367],{},"Öffnen Sie den ",[34,337,339],{"href":338},"/dev/chatgpt-session-converter","ChatGPT-Session-Konverter"," und wählen Sie oben das gewünschte Zielformat (",[19,342,343],{},"Sub2API",[19,345,346],{},"CPA",[19,348,349],{},"Cockpit",[19,351,352],{},"9Router",[19,354,355],{},"Codex",[19,357,358],{},"AxonHub"," oder ",[19,361,362],{},"Codex-Manager","). Sie können JSON-Text direkt einfügen oder mehrere ",[19,365,366],{},".json","-Dateien per Drag-and-drop ablegen:",[78,369,370,376,382],{},[43,371,372,375],{},[46,373,374],{},"automatische Feldzuordnung",": E-Mail-Adresse, Account-ID, Ablaufdatum und Tokens werden automatisch aus Einzelobjekten oder Arrays extrahiert.",[43,377,378,381],{},[46,379,380],{},"Übersichtstabelle und Fehlerprüfung",": Eine Vorschautabelle zeigt alle erkannten Konten und meldet übersprungene Einträge, falls erforderliche Tokens fehlen.",[43,383,384,387,388,390],{},[46,385,386],{},"Direkter Export",": Kopieren Sie das fertige JSON in die Zwischenablage oder laden Sie die ",[19,389,366],{},"-Datei direkt herunter.",[28,392,394],{"id":393},"warum-lokale-browser-verarbeitung-entscheidend-ist","Warum lokale Browser-Verarbeitung entscheidend ist",[15,396,397,398,400],{},"Session- und Refresh-Tokens sind so sensibel wie Passwörter. Da der ",[34,399,339],{"href":338}," vollständig lokal im Browser-Tab ohne Netzwerkanfragen arbeitet, verlassen Ihre Zugangsdaten zu keinem Zeitpunkt Ihr Gerät.",[28,402,404],{"id":403},"tipps-vor-dem-gateway-import","Tipps vor dem Gateway-Import",[15,406,407,408,268,410,359,412,414,415,418,419,422,423,426,427,275,429,431],{},"Prüfen Sie vorab, ob Ihr Zielsystem (etwa ",[19,409,346],{},[19,411,349],{},[19,413,355],{},") zwingend ein ",[19,416,417],{},"refresh_token"," (",[19,420,421],{},"rt",") für die automatische Verlängerung benötigt, da der Standard-Aufruf von ",[19,424,425],{},"/api/auth/session"," im Browser oft nur ",[19,428,267],{},[19,430,271],{}," liefert. Speichern Sie exportierte Konfigurationsdateien stets verschlüsselt ab.",{"title":153,"searchDepth":154,"depth":154,"links":433},[434,435,436,437],{"id":282,"depth":154,"text":283},{"id":331,"depth":154,"text":332},{"id":393,"depth":154,"text":394},{"id":403,"depth":154,"text":404},"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":252,"description":438},"blog/de-DE/how-to-convert-chatgpt-session-json-safely",[445,446,447,177],"ChatGPT session converter","JSON","JWT",[338,326,321],"8Rj0TFNJo7zHz5l4qpWzsokgwsi3MCogFS5PG1_3zF0",1793096644261]