[{"data":1,"prerenderedAt":454},["ShallowReactive",2],{"blog-post-/blog/ru-ru/how-to-render-and-export-mermaid-diagrams-online":3,"related-posts-/ru-RU/blog/how-to-render-and-export-mermaid-diagrams-online":185},{"id":4,"title":5,"author":6,"body":7,"category":165,"date":166,"description":167,"extension":168,"featured":169,"image":170,"meta":171,"navigation":172,"path":173,"readingTime":174,"seo":175,"stem":176,"tags":177,"tools":182,"__hash__":184},"content/blog/ru-RU/how-to-render-and-export-mermaid-diagrams-online.md","Как рендерить и экспортировать диаграммы Mermaid онлайн: из кода ИИ в чёткие SVG и PNG","Anything Tools Editorial",{"type":8,"value":9,"toc":156},"minimark",[10,14,27,32,41,63,70,74,81,111,115,118,137,141,149,153],[11,12,5],"h1",{"id":13},"как-рендерить-и-экспортировать-диаграммы-mermaid-онлайн-из-кода-ии-в-чёткие-svg-и-png",[15,16,17,18,22,23,26],"p",{},"Языковые модели вроде ChatGPT, Claude и DeepSeek отлично генерируют архитектуру систем, диаграммы последовательности и схемы баз данных в синтаксисе Mermaid. Однако сырые блоки ",[19,20,21],"code",{},"flowchart TD"," или ",[19,24,25],{},"sequenceDiagram"," нельзя просто вставить в презентацию PowerPoint, документ Word или клиентский PDF. Чтобы быстро превратить текстовое описание в готовую иллюстрацию, нужен живой предпросмотр и чистый экспорт.",[28,29,31],"h2",{"id":30},"живой-предпросмотр-и-исправление-частых-ошибок-синтаксиса","Живой предпросмотр и исправление частых ошибок синтаксиса",[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,73],{"id":72},"выбор-подходящей-темы-и-визуального-стиля","Выбор подходящей темы и визуального стиля",[15,75,76,77,80],{},"Схема, рассчитанная на тёмную тему IDE, часто теряет контраст на белом слайде. Перед экспортом настройте внешний вид на верхней панели ",[36,78,79],{"href":38},"Рендерера Mermaid",":",[82,83,84,105],"ol",{},[45,85,86,89,90,22,93,96,97,100,101,104],{},[48,87,88],{},"Цветовая тема (Theme)",": Выбирайте ",[19,91,92],{},"default",[19,94,95],{},"neutral"," для печатных документов и светлых презентаций, ",[19,98,99],{},"dark"," для тёмных дашбордов или ",[19,102,103],{},"forest"," для спокойной технической документации.",[45,106,107,110],{},[48,108,109],{},"Классический или рукописный вид (Look)",": Классическая геометрия подходит для финальной архитектуры и ER-диаграмм, а рукописный стиль (Hand-drawn) удобен на ранних этапах проектирования, чтобы команда обсуждала логику, а не выравнивание блоков.",[28,112,114],{"id":113},"векторный-svg-или-png-высокого-разрешения","Векторный SVG или PNG высокого разрешения?",[15,116,117],{},"Выбор формата зависит от того, куда вы вставляете схему:",[42,119,120,126],{},[45,121,122,125],{},[48,123,124],{},"SVG (векторная графика)",": Лучший вариант для технических блогов, документации и Figma. Линии и текст остаются идеально чёткими при любом масштабировании.",[45,127,128,131,132,136],{},[48,129,130],{},"PNG",": Подходит для Google Slides, PowerPoint, Slack, Jira и Word, где загрузка SVG часто ограничена. Если затем нужно уменьшить вес картинки для веб-страницы, пропустите PNG через ",[36,133,135],{"href":134},"/image/converter","Конвертер изображений"," для перевода в WebP или AVIF.",[28,138,140],{"id":139},"совместная-работа-с-публикацией-markdown","Совместная работа с публикацией Markdown",[15,142,143,144,148],{},"Если диаграмма входит в состав большой технической статьи, сначала проверьте и экспортируйте схему, а затем преобразуйте основной текст с помощью ",[36,145,147],{"href":146},"/text/markdown-to-html","Конвертера Markdown в HTML",". Храните исходный код Mermaid рядом с экспортированной картинкой в репозитории, чтобы любые правки занимали секунды.",[28,150,152],{"id":151},"заключение","Заключение",[15,154,155],{},"Mermaid позволяет хранить диаграммы как версионируемый текст, а браузерный рендерер мгновенно превращает этот код в готовую графику. Заключайте сложные подписи в кавычки, подбирайте тему под фон и экспортируйте схему в SVG или PNG в зависимости от целевой площадки.",{"title":157,"searchDepth":158,"depth":158,"links":159},"",2,[160,161,162,163,164],{"id":30,"depth":158,"text":31},{"id":72,"depth":158,"text":73},{"id":113,"depth":158,"text":114},{"id":139,"depth":158,"text":140},{"id":151,"depth":158,"text":152},"Developer Tools","2026-10-27T00:00:00.000Z","Предпросмотр блок-схем, диаграмм последовательности и ERD Mermaid в браузере, исправление ошибок синтаксиса, смена тем и экспорт в SVG или PNG.","md",false,"/blog/how-to-render-and-export-mermaid-diagrams-online.png",{},true,"/blog/ru-ru/how-to-render-and-export-mermaid-diagrams-online",5,{"title":5,"description":167},"blog/ru-RU/how-to-render-and-export-mermaid-diagrams-online",[178,179,180,181],"Mermaid renderer","diagram to SVG","flowchart","developer tools",[183,38,146,134],"/dev/svg-viewer","PuXr-0vvD4ZNT411oXBAmszdorn104jJwQ64PRZM1H8",[186,254],{"id":187,"title":188,"author":6,"body":189,"category":165,"date":241,"description":242,"extension":168,"featured":169,"image":243,"meta":244,"navigation":172,"path":245,"readingTime":174,"seo":246,"stem":247,"tags":248,"tools":252,"__hash__":253},"content/blog/de-DE/convert-image-to-base64-guide.md","Convert Images to Base64: When It Helps and When It Hurts",{"type":8,"value":190,"toc":235},[191,194,197,200,213,216,223,226,229,232],[11,192,188],{"id":193},"convert-images-to-base64-when-it-helps-and-when-it-hurts",[15,195,196],{},"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,198,199],{"id":199},"核心思路",[15,201,202,203,207,208,212],{},"Use the ",[36,204,206],{"href":205},"/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,209,211],{"href":210},"/dev/base64","Base64 Encoder/Decoder"," is the simpler companion.",[28,214,215],{"id":215},"适用场景",[15,217,218,219,222],{},"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,220,221],{"href":134},"Image Converter",".",[28,224,225],{"id":225},"性能取舍",[15,227,228],{},"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,230,231],{"id":231},"最后检查",[15,233,234],{},"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":157,"searchDepth":158,"depth":158,"links":236},[237,238,239,240],{"id":199,"depth":158,"text":199},{"id":215,"depth":158,"text":215},{"id":225,"depth":158,"text":225},{"id":231,"depth":158,"text":231},"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":188,"description":242},"blog/de-DE/convert-image-to-base64-guide",[249,250,181,251],"base64","image encoding","web performance",[205,210,134],"T9fy8iDSs-jO4VkKmehuIai9nm-fgE0ZjLx5T5-3BX4",{"id":255,"title":256,"author":6,"body":257,"category":165,"date":166,"description":442,"extension":168,"featured":169,"image":443,"meta":444,"navigation":172,"path":445,"readingTime":174,"seo":446,"stem":447,"tags":448,"tools":452,"__hash__":453},"content/blog/de-DE/how-to-convert-chatgpt-session-json-safely.md","ChatGPT-Session-JSON sicher im Browser konvertieren",{"type":8,"value":258,"toc":436},[259,262,284,288,291,320,333,337,372,395,399,405,409],[11,260,256],{"id":261},"chatgpt-session-json-sicher-im-browser-konvertieren",[15,263,264,265,268,269,272,273,272,276,279,280,283],{},"Wer selbst gehostete KI-Gateways, Coding-Assistenten oder Account-Pools verwaltet, muss häufig Rohdaten aus ",[19,266,267],{},"https://chatgpt.com/api/auth/session"," in das Konfigurationsschema des jeweiligen Zielsystems überführen. Felder wie ",[19,270,271],{},"accessToken",", ",[19,274,275],{},"sessionToken",[19,277,278],{},"refreshToken"," und ",[19,281,282],{},"account.id"," manuell aus Dutzenden JSON-Dateien zu kopieren ist fehleranfällig – und echte Zugangsdaten auf fremde Server hochzuladen ist ein erhebliches Sicherheitsrisiko.",[28,285,287],{"id":286},"was-in-einem-session-payload-steckt","Was in einem Session-Payload steckt",[15,289,290],{},"Eine typische ChatGPT-Session-Antwort enthält neben Metadaten hochsensible Authentifizierungsdaten:",[42,292,293,302,312],{},[45,294,295,301],{},[48,296,297,279,299],{},[19,298,271],{},[19,300,275],{},": Inhabertokens, die direkten Zugriff auf das Konto gewähren.",[45,303,304,311],{},[48,305,306,279,309],{},[19,307,308],{},"user.email",[19,310,282],{},": Kennungen zur Zuordnung und zum Routing innerhalb eines Gateways.",[45,313,314,319],{},[48,315,316],{},[19,317,318],{},"expires",": Der ISO-Zeitstempel für das Ablaufdatum der aktuellen Sitzung.",[15,321,322,323,327,328,332],{},"Vor der Umwandlung können Sie unübersichtliche Dateien im ",[36,324,326],{"href":325},"/dev/json-formatter","JSON-Formatter"," prüfen oder enthaltene Token-Claims samt Ablaufzeitpunkt im ",[36,329,331],{"href":330},"/dev/jwt-decoder","JWT-Decoder"," lokal auslesen.",[28,334,336],{"id":335},"einzelne-daten-oder-datei-batches-lokal-umwandeln","Einzelne Daten oder Datei-Batches lokal umwandeln",[15,338,339,340,344,345,272,348,272,351,272,354,272,357,272,360,363,364,367,368,371],{},"Öffnen Sie den ",[36,341,343],{"href":342},"/dev/chatgpt-session-converter","ChatGPT-Session-Konverter"," und wählen Sie oben das gewünschte Zielformat (",[19,346,347],{},"Sub2API",[19,349,350],{},"CPA",[19,352,353],{},"Cockpit",[19,355,356],{},"9Router",[19,358,359],{},"Codex",[19,361,362],{},"AxonHub"," oder ",[19,365,366],{},"Codex-Manager","). Sie können JSON-Text direkt einfügen oder mehrere ",[19,369,370],{},".json","-Dateien per Drag-and-drop ablegen:",[82,373,374,380,386],{},[45,375,376,379],{},[48,377,378],{},"automatische Feldzuordnung",": E-Mail-Adresse, Account-ID, Ablaufdatum und Tokens werden automatisch aus Einzelobjekten oder Arrays extrahiert.",[45,381,382,385],{},[48,383,384],{},"Übersichtstabelle und Fehlerprüfung",": Eine Vorschautabelle zeigt alle erkannten Konten und meldet übersprungene Einträge, falls erforderliche Tokens fehlen.",[45,387,388,391,392,394],{},[48,389,390],{},"Direkter Export",": Kopieren Sie das fertige JSON in die Zwischenablage oder laden Sie die ",[19,393,370],{},"-Datei direkt herunter.",[28,396,398],{"id":397},"warum-lokale-browser-verarbeitung-entscheidend-ist","Warum lokale Browser-Verarbeitung entscheidend ist",[15,400,401,402,404],{},"Session- und Refresh-Tokens sind so sensibel wie Passwörter. Da der ",[36,403,343],{"href":342}," vollständig lokal im Browser-Tab ohne Netzwerkanfragen arbeitet, verlassen Ihre Zugangsdaten zu keinem Zeitpunkt Ihr Gerät.",[28,406,408],{"id":407},"tipps-vor-dem-gateway-import","Tipps vor dem Gateway-Import",[15,410,411,412,272,414,363,416,418,419,422,423,426,427,430,431,279,433,435],{},"Prüfen Sie vorab, ob Ihr Zielsystem (etwa ",[19,413,350],{},[19,415,353],{},[19,417,359],{},") zwingend ein ",[19,420,421],{},"refresh_token"," (",[19,424,425],{},"rt",") für die automatische Verlängerung benötigt, da der Standard-Aufruf von ",[19,428,429],{},"/api/auth/session"," im Browser oft nur ",[19,432,271],{},[19,434,275],{}," liefert. Speichern Sie exportierte Konfigurationsdateien stets verschlüsselt ab.",{"title":157,"searchDepth":158,"depth":158,"links":437},[438,439,440,441],{"id":286,"depth":158,"text":287},{"id":335,"depth":158,"text":336},{"id":397,"depth":158,"text":398},{"id":407,"depth":158,"text":408},"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":256,"description":442},"blog/de-DE/how-to-convert-chatgpt-session-json-safely",[449,450,451,181],"ChatGPT session converter","JSON","JWT",[342,330,325],"8Rj0TFNJo7zHz5l4qpWzsokgwsi3MCogFS5PG1_3zF0",1793097009671]