[{"data":1,"prerenderedAt":449},["ShallowReactive",2],{"blog-post-/blog/es-es/how-to-render-and-export-mermaid-diagrams-online":3,"related-posts-/es-ES/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/es-ES/how-to-render-and-export-mermaid-diagrams-online.md","Cómo renderizar y exportar diagramas Mermaid online: de código IA a SVG y PNG nítidos","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},"cómo-renderizar-y-exportar-diagramas-mermaid-online-de-código-ia-a-svg-y-png-nítidos",[15,16,17,18,22,23,26],"p",{},"Modelos como ChatGPT, Claude y DeepSeek generan arquitecturas de sistemas, flujos de secuencia y esquemas de bases de datos en sintaxis Mermaid en cuestión de segundos. Sin embargo, los bloques ",[19,20,21],"code",{},"flowchart TD"," o ",[19,24,25],{},"sequenceDiagram"," en texto plano no se pueden insertar directamente en presentaciones de PowerPoint, documentos de Word o informes en PDF. Convertir esa definición textual en un recurso visual listo para compartir requiere una vista previa en vivo y una exportación limpia.",[28,29,31],"h2",{"id":30},"previsualiza-el-diagrama-y-corrige-errores-de-sintaxis-al-instante","Previsualiza el diagrama y corrige errores de sintaxis al instante",[15,33,34,35,40],{},"Pega tu código en el ",[36,37,39],"a",{"href":38},"/dev/mermaid-renderer","Renderizador Mermaid"," para inspeccionar el gráfico de inmediato. Cuando un asistente de IA produce un error de análisis en Mermaid, casi siempre se debe a paréntesis, corchetes o dos puntos sin comillas dentro de las etiquetas de los nodos:",[42,43,44,55],"ul",{},[45,46,47,51,52],"li",{},[48,49,50],"strong",{},"Etiqueta con error",": ",[19,53,54],{},"A[Inicio de sesión (Admin)] --> B[Panel]",[45,56,57,51,60],{},[48,58,59],{},"Etiqueta segura entre comillas",[19,61,62],{},"A[\"Inicio de sesión (Admin)\"] --> B[\"Panel\"]",[15,64,65],{},"Rodear cualquier texto con signos de puntuación o caracteres especiales entre comillas dobles evita que el analizador confunda el texto con la forma del nodo.",[28,67,69],{"id":68},"elige-el-tema-y-el-estilo-visual-adecuados","Elige el tema y el estilo visual adecuados",[15,71,72,73,75],{},"Un diagrama pensado para un README oscuro rara vez se lee bien sobre una diapositiva blanca. Antes de exportar, usa la barra superior del ",[36,74,39],{"href":38}," para ajustar la apariencia:",[77,78,79,100],"ol",{},[45,80,81,84,85,22,88,91,92,95,96,99],{},[48,82,83],{},"Temas de color",": Elige ",[19,86,87],{},"default",[19,89,90],{},"neutral"," para documentación impresa y diapositivas claras, ",[19,93,94],{},"dark"," para paneles oscuros o ",[19,97,98],{},"forest"," para especificaciones técnicas con tonos suaves.",[45,101,102,105],{},[48,103,104],{},"Estilo clásico vs. boceto a mano (Hand-drawn)",": Usa líneas geométricas clásicas para arquitecturas definitivas y diagramas entidad-relación, o cambia al estilo dibujado a mano en sesiones de diseño temprano para centrar la conversación en el flujo lógico.",[28,107,109],{"id":108},"cuándo-exportar-en-svg-vectorial-frente-a-png-de-alta-resolución","Cuándo exportar en SVG vectorial frente a PNG de alta resolución",[15,111,112],{},"Elegir el formato correcto evita textos borrosos al incrustar el diagrama:",[42,114,115,121],{},[45,116,117,120],{},[48,118,119],{},"SVG (gráfico vectorial escalable)",": Ideal para blogs técnicos, portales de documentación y herramientas de diseño como Figma. Mantiene nitidez perfecta a cualquier nivel de zoom.",[45,122,123,126,127,131],{},[48,124,125],{},"PNG",": Ideal para Google Slides, PowerPoint, Slack, Jira y Word, donde los archivos SVG suelen bloquearse. Si necesitas publicar la imagen en la web con menor peso, pásala después por el ",[36,128,130],{"href":129},"/image/converter","Convertidor de Imágenes"," para obtener WebP o AVIF.",[28,133,135],{"id":134},"integra-los-diagramas-con-tu-flujo-de-publicación-en-markdown","Integra los diagramas con tu flujo de publicación en Markdown",[15,137,138,139,143],{},"Si el bloque Mermaid forma parte de una especificación más amplia, valida y exporta primero el diagrama y luego transforma el documento con el ",[36,140,142],{"href":141},"/text/markdown-to-html","Convertidor de Markdown a HTML",". Conservar el código fuente de Mermaid junto a la imagen exportada te permitirá actualizar el diagrama en segundos cuando cambie la arquitectura.",[28,145,147],{"id":146},"conclusión","Conclusión",[15,149,150],{},"Mermaid convierte los diagramas en texto versionable, y un renderizador en el navegador transforma esa sintaxis en gráficos listos para presentar. Usa comillas en etiquetas complejas, adapta el tema al fondo de destino y exporta en SVG o PNG según dónde se vaya a leer.",{"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","Previsualiza diagramas de flujo, secuencia y ERD de Mermaid en el navegador, corrige errores de sintaxis, cambia temas y exporta archivos SVG o PNG limpios.","md",false,"/blog/how-to-render-and-export-mermaid-diagrams-online.png",{},true,"/blog/es-es/how-to-render-and-export-mermaid-diagrams-online",5,{"title":5,"description":162},"blog/es-ES/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","g_yQottxYChNILpf6HMl2bLxNU4g81VauySSGYIS4Es",[181,249],{"id":182,"title":183,"author":6,"body":184,"category":160,"date":236,"description":237,"extension":163,"featured":164,"image":238,"meta":239,"navigation":167,"path":240,"readingTime":169,"seo":241,"stem":242,"tags":243,"tools":247,"__hash__":248},"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":230},[186,189,192,195,208,211,218,221,224,227],[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,217],{},"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,216],{"href":129},"Image Converter",".",[28,219,220],{"id":220},"性能取舍",[15,222,223],{},"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,225,226],{"id":226},"最后检查",[15,228,229],{},"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":231},[232,233,234,235],{"id":194,"depth":153,"text":194},{"id":210,"depth":153,"text":210},{"id":220,"depth":153,"text":220},{"id":226,"depth":153,"text":226},"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":237},"blog/de-DE/convert-image-to-base64-guide",[244,245,176,246],"base64","image encoding","web performance",[200,205,129],"T9fy8iDSs-jO4VkKmehuIai9nm-fgE0ZjLx5T5-3BX4",{"id":250,"title":251,"author":6,"body":252,"category":160,"date":161,"description":437,"extension":163,"featured":164,"image":438,"meta":439,"navigation":167,"path":440,"readingTime":169,"seo":441,"stem":442,"tags":443,"tools":447,"__hash__":448},"content/blog/de-DE/how-to-convert-chatgpt-session-json-safely.md","ChatGPT-Session-JSON sicher im Browser konvertieren",{"type":8,"value":253,"toc":431},[254,257,279,283,286,315,328,332,367,390,394,400,404],[11,255,251],{"id":256},"chatgpt-session-json-sicher-im-browser-konvertieren",[15,258,259,260,263,264,267,268,267,271,274,275,278],{},"Wer selbst gehostete KI-Gateways, Coding-Assistenten oder Account-Pools verwaltet, muss häufig Rohdaten aus ",[19,261,262],{},"https://chatgpt.com/api/auth/session"," in das Konfigurationsschema des jeweiligen Zielsystems überführen. Felder wie ",[19,265,266],{},"accessToken",", ",[19,269,270],{},"sessionToken",[19,272,273],{},"refreshToken"," und ",[19,276,277],{},"account.id"," manuell aus Dutzenden JSON-Dateien zu kopieren ist fehleranfällig – und echte Zugangsdaten auf fremde Server hochzuladen ist ein erhebliches Sicherheitsrisiko.",[28,280,282],{"id":281},"was-in-einem-session-payload-steckt","Was in einem Session-Payload steckt",[15,284,285],{},"Eine typische ChatGPT-Session-Antwort enthält neben Metadaten hochsensible Authentifizierungsdaten:",[42,287,288,297,307],{},[45,289,290,296],{},[48,291,292,274,294],{},[19,293,266],{},[19,295,270],{},": Inhabertokens, die direkten Zugriff auf das Konto gewähren.",[45,298,299,306],{},[48,300,301,274,304],{},[19,302,303],{},"user.email",[19,305,277],{},": Kennungen zur Zuordnung und zum Routing innerhalb eines Gateways.",[45,308,309,314],{},[48,310,311],{},[19,312,313],{},"expires",": Der ISO-Zeitstempel für das Ablaufdatum der aktuellen Sitzung.",[15,316,317,318,322,323,327],{},"Vor der Umwandlung können Sie unübersichtliche Dateien im ",[36,319,321],{"href":320},"/dev/json-formatter","JSON-Formatter"," prüfen oder enthaltene Token-Claims samt Ablaufzeitpunkt im ",[36,324,326],{"href":325},"/dev/jwt-decoder","JWT-Decoder"," lokal auslesen.",[28,329,331],{"id":330},"einzelne-daten-oder-datei-batches-lokal-umwandeln","Einzelne Daten oder Datei-Batches lokal umwandeln",[15,333,334,335,339,340,267,343,267,346,267,349,267,352,267,355,358,359,362,363,366],{},"Öffnen Sie den ",[36,336,338],{"href":337},"/dev/chatgpt-session-converter","ChatGPT-Session-Konverter"," und wählen Sie oben das gewünschte Zielformat (",[19,341,342],{},"Sub2API",[19,344,345],{},"CPA",[19,347,348],{},"Cockpit",[19,350,351],{},"9Router",[19,353,354],{},"Codex",[19,356,357],{},"AxonHub"," oder ",[19,360,361],{},"Codex-Manager","). Sie können JSON-Text direkt einfügen oder mehrere ",[19,364,365],{},".json","-Dateien per Drag-and-drop ablegen:",[77,368,369,375,381],{},[45,370,371,374],{},[48,372,373],{},"automatische Feldzuordnung",": E-Mail-Adresse, Account-ID, Ablaufdatum und Tokens werden automatisch aus Einzelobjekten oder Arrays extrahiert.",[45,376,377,380],{},[48,378,379],{},"Übersichtstabelle und Fehlerprüfung",": Eine Vorschautabelle zeigt alle erkannten Konten und meldet übersprungene Einträge, falls erforderliche Tokens fehlen.",[45,382,383,386,387,389],{},[48,384,385],{},"Direkter Export",": Kopieren Sie das fertige JSON in die Zwischenablage oder laden Sie die ",[19,388,365],{},"-Datei direkt herunter.",[28,391,393],{"id":392},"warum-lokale-browser-verarbeitung-entscheidend-ist","Warum lokale Browser-Verarbeitung entscheidend ist",[15,395,396,397,399],{},"Session- und Refresh-Tokens sind so sensibel wie Passwörter. Da der ",[36,398,338],{"href":337}," vollständig lokal im Browser-Tab ohne Netzwerkanfragen arbeitet, verlassen Ihre Zugangsdaten zu keinem Zeitpunkt Ihr Gerät.",[28,401,403],{"id":402},"tipps-vor-dem-gateway-import","Tipps vor dem Gateway-Import",[15,405,406,407,267,409,358,411,413,414,417,418,421,422,425,426,274,428,430],{},"Prüfen Sie vorab, ob Ihr Zielsystem (etwa ",[19,408,345],{},[19,410,348],{},[19,412,354],{},") zwingend ein ",[19,415,416],{},"refresh_token"," (",[19,419,420],{},"rt",") für die automatische Verlängerung benötigt, da der Standard-Aufruf von ",[19,423,424],{},"/api/auth/session"," im Browser oft nur ",[19,427,266],{},[19,429,270],{}," liefert. Speichern Sie exportierte Konfigurationsdateien stets verschlüsselt ab.",{"title":152,"searchDepth":153,"depth":153,"links":432},[433,434,435,436],{"id":281,"depth":153,"text":282},{"id":330,"depth":153,"text":331},{"id":392,"depth":153,"text":393},{"id":402,"depth":153,"text":403},"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":251,"description":437},"blog/de-DE/how-to-convert-chatgpt-session-json-safely",[444,445,446,176],"ChatGPT session converter","JSON","JWT",[337,325,320],"8Rj0TFNJo7zHz5l4qpWzsokgwsi3MCogFS5PG1_3zF0",1793096715810]