[{"data":1,"prerenderedAt":448},["ShallowReactive",2],{"blog-post-/blog/fr-fr/how-to-render-and-export-mermaid-diagrams-online":3,"related-posts-/fr-FR/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/fr-FR/how-to-render-and-export-mermaid-diagrams-online.md","Comment afficher et exporter des diagrammes Mermaid en ligne : du code IA aux fichiers SVG et PNG","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},"comment-afficher-et-exporter-des-diagrammes-mermaid-en-ligne-du-code-ia-aux-fichiers-svg-et-png",[15,16,17,18,22,23,26],"p",{},"Les modèles comme ChatGPT, Claude et DeepSeek génèrent facilement des architectures système, des flux de séquence et des schémas de base de données en syntaxe Mermaid. Pourtant, un bloc brut ",[19,20,21],"code",{},"flowchart TD"," ou ",[19,24,25],{},"sequenceDiagram"," ne peut pas être collé tel quel dans une présentation PowerPoint, un document Word ou un livrable client. Transformer ce texte en visuel propre demande un aperçu instantané et un export fiable.",[28,29,31],"h2",{"id":30},"prévisualiser-le-diagramme-et-corriger-les-erreurs-de-syntaxe","Prévisualiser le diagramme et corriger les erreurs de syntaxe",[15,33,34,35,40],{},"Collez votre extrait dans le ",[36,37,39],"a",{"href":38},"/dev/mermaid-renderer","Rendu Mermaid en ligne"," pour visualiser immédiatement le graphique. Lorsqu’un assistant IA produit une erreur de syntaxe Mermaid, cela vient presque toujours de parenthèses, crochets ou deux-points non protégés dans les libellés des nœuds :",[42,43,44,55],"ul",{},[45,46,47,51,52],"li",{},[48,49,50],"strong",{},"Libellé fragile"," : ",[19,53,54],{},"A[Connexion utilisateur (Admin)] --> B[Tableau de bord]",[45,56,57,51,60],{},[48,58,59],{},"Libellé sécurisé entre guillemets",[19,61,62],{},"A[\"Connexion utilisateur (Admin)\"] --> B[\"Tableau de bord\"]",[15,64,65],{},"Entourer les libellés contenant de la ponctuation ou des accents avec des guillemets doubles supprime les erreurs d’analyse tout en gardant un code lisible.",[28,67,69],{"id":68},"adapter-le-thème-et-le-style-visuel-au-support-cible","Adapter le thème et le style visuel au support cible",[15,71,72,73,75],{},"Un diagramme lisible sur un fond sombre d’IDE manque souvent de contraste sur une diapositive blanche. Avant d’exporter, utilisez la barre d’outils du ",[36,74,39],{"href":38}," pour ajuster le rendu :",[77,78,79,100],"ol",{},[45,80,81,84,85,22,88,91,92,95,96,99],{},[48,82,83],{},"Thèmes de couleurs"," : Choisissez ",[19,86,87],{},"default",[19,89,90],{},"neutral"," pour les documents imprimés et les présentations claires, ",[19,93,94],{},"dark"," pour les interfaces sombres, ou ",[19,97,98],{},"forest"," pour une documentation technique apaisée.",[45,101,102,105],{},[48,103,104],{},"Style classique ou esquissé (Hand-drawn)"," : Préférez le style géométrique classique pour les architectures finales et les schémas relationnels, et le mode dessiné à la main lors des ateliers de cadrage produit.",[28,107,109],{"id":108},"exporter-en-svg-vectoriel-ou-en-png-haute-définition","Exporter en SVG vectoriel ou en PNG haute définition ?",[15,111,112],{},"Le choix du format garantit la netteté du texte une fois le schéma intégré :",[42,114,115,121],{},[45,116,117,120],{},[48,118,119],{},"SVG (vectoriel)"," : Idéal pour les blogs techniques, la documentation web et Figma. Les tracés restent parfaitement nets quel que soit le niveau de zoom.",[45,122,123,126,127,131],{},[48,124,125],{},"PNG"," : Recommandé pour Google Slides, PowerPoint, Slack, Jira et Word où le SVG est souvent refusé. Pour alléger ensuite une image PNG destinée au web, convertissez-la en WebP ou AVIF via le ",[36,128,130],{"href":129},"/image/converter","Convertisseur d’images",".",[28,133,135],{"id":134},"associer-vos-schémas-au-flux-de-publication-markdown","Associer vos schémas au flux de publication Markdown",[15,137,138,139,143],{},"Si votre diagramme accompagne une spécification complète, validez d’abord le graphique, exportez l’image, puis préparez le corps du texte avec le ",[36,140,142],{"href":141},"/text/markdown-to-html","Convertisseur Markdown vers HTML",". Conservez toujours la source Mermaid à côté du fichier exporté afin de pouvoir mettre à jour le schéma en quelques secondes.",[28,145,147],{"id":146},"conclusion","Conclusion",[15,149,150],{},"Mermaid apporte la souplesse du texte au dessin technique, et un outil de rendu dans le navigateur permet de passer immédiatement du code au fichier livrable. Protégez vos libellés entre guillemets, choisissez un thème adapté au fond et exportez en SVG ou PNG selon votre canal de diffusion.",{"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","Prévisualisez vos organigrammes, diagrammes de séquence et ERD Mermaid dans le navigateur, corrigez la syntaxe, changez de thème et exportez en SVG ou PNG.","md",false,"/blog/how-to-render-and-export-mermaid-diagrams-online.png",{},true,"/blog/fr-fr/how-to-render-and-export-mermaid-diagrams-online",5,{"title":5,"description":162},"blog/fr-FR/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","fd1FEtPzooU2rnu_1zcmEmUWg2hHUPP7A_DzrGZbJrU",[181,248],{"id":182,"title":183,"author":6,"body":184,"category":160,"date":235,"description":236,"extension":163,"featured":164,"image":237,"meta":238,"navigation":167,"path":239,"readingTime":169,"seo":240,"stem":241,"tags":242,"tools":246,"__hash__":247},"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":229},[186,189,192,195,208,211,217,220,223,226],[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,131],{},"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,218,219],{"id":219},"性能取舍",[15,221,222],{},"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,224,225],{"id":225},"最后检查",[15,227,228],{},"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":230},[231,232,233,234],{"id":194,"depth":153,"text":194},{"id":210,"depth":153,"text":210},{"id":219,"depth":153,"text":219},{"id":225,"depth":153,"text":225},"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":236},"blog/de-DE/convert-image-to-base64-guide",[243,244,176,245],"base64","image encoding","web performance",[200,205,129],"T9fy8iDSs-jO4VkKmehuIai9nm-fgE0ZjLx5T5-3BX4",{"id":249,"title":250,"author":6,"body":251,"category":160,"date":161,"description":436,"extension":163,"featured":164,"image":437,"meta":438,"navigation":167,"path":439,"readingTime":169,"seo":440,"stem":441,"tags":442,"tools":446,"__hash__":447},"content/blog/de-DE/how-to-convert-chatgpt-session-json-safely.md","ChatGPT-Session-JSON sicher im Browser konvertieren",{"type":8,"value":252,"toc":430},[253,256,278,282,285,314,327,331,366,389,393,399,403],[11,254,250],{"id":255},"chatgpt-session-json-sicher-im-browser-konvertieren",[15,257,258,259,262,263,266,267,266,270,273,274,277],{},"Wer selbst gehostete KI-Gateways, Coding-Assistenten oder Account-Pools verwaltet, muss häufig Rohdaten aus ",[19,260,261],{},"https://chatgpt.com/api/auth/session"," in das Konfigurationsschema des jeweiligen Zielsystems überführen. Felder wie ",[19,264,265],{},"accessToken",", ",[19,268,269],{},"sessionToken",[19,271,272],{},"refreshToken"," und ",[19,275,276],{},"account.id"," manuell aus Dutzenden JSON-Dateien zu kopieren ist fehleranfällig – und echte Zugangsdaten auf fremde Server hochzuladen ist ein erhebliches Sicherheitsrisiko.",[28,279,281],{"id":280},"was-in-einem-session-payload-steckt","Was in einem Session-Payload steckt",[15,283,284],{},"Eine typische ChatGPT-Session-Antwort enthält neben Metadaten hochsensible Authentifizierungsdaten:",[42,286,287,296,306],{},[45,288,289,295],{},[48,290,291,273,293],{},[19,292,265],{},[19,294,269],{},": Inhabertokens, die direkten Zugriff auf das Konto gewähren.",[45,297,298,305],{},[48,299,300,273,303],{},[19,301,302],{},"user.email",[19,304,276],{},": Kennungen zur Zuordnung und zum Routing innerhalb eines Gateways.",[45,307,308,313],{},[48,309,310],{},[19,311,312],{},"expires",": Der ISO-Zeitstempel für das Ablaufdatum der aktuellen Sitzung.",[15,315,316,317,321,322,326],{},"Vor der Umwandlung können Sie unübersichtliche Dateien im ",[36,318,320],{"href":319},"/dev/json-formatter","JSON-Formatter"," prüfen oder enthaltene Token-Claims samt Ablaufzeitpunkt im ",[36,323,325],{"href":324},"/dev/jwt-decoder","JWT-Decoder"," lokal auslesen.",[28,328,330],{"id":329},"einzelne-daten-oder-datei-batches-lokal-umwandeln","Einzelne Daten oder Datei-Batches lokal umwandeln",[15,332,333,334,338,339,266,342,266,345,266,348,266,351,266,354,357,358,361,362,365],{},"Öffnen Sie den ",[36,335,337],{"href":336},"/dev/chatgpt-session-converter","ChatGPT-Session-Konverter"," und wählen Sie oben das gewünschte Zielformat (",[19,340,341],{},"Sub2API",[19,343,344],{},"CPA",[19,346,347],{},"Cockpit",[19,349,350],{},"9Router",[19,352,353],{},"Codex",[19,355,356],{},"AxonHub"," oder ",[19,359,360],{},"Codex-Manager","). Sie können JSON-Text direkt einfügen oder mehrere ",[19,363,364],{},".json","-Dateien per Drag-and-drop ablegen:",[77,367,368,374,380],{},[45,369,370,373],{},[48,371,372],{},"automatische Feldzuordnung",": E-Mail-Adresse, Account-ID, Ablaufdatum und Tokens werden automatisch aus Einzelobjekten oder Arrays extrahiert.",[45,375,376,379],{},[48,377,378],{},"Übersichtstabelle und Fehlerprüfung",": Eine Vorschautabelle zeigt alle erkannten Konten und meldet übersprungene Einträge, falls erforderliche Tokens fehlen.",[45,381,382,385,386,388],{},[48,383,384],{},"Direkter Export",": Kopieren Sie das fertige JSON in die Zwischenablage oder laden Sie die ",[19,387,364],{},"-Datei direkt herunter.",[28,390,392],{"id":391},"warum-lokale-browser-verarbeitung-entscheidend-ist","Warum lokale Browser-Verarbeitung entscheidend ist",[15,394,395,396,398],{},"Session- und Refresh-Tokens sind so sensibel wie Passwörter. Da der ",[36,397,337],{"href":336}," vollständig lokal im Browser-Tab ohne Netzwerkanfragen arbeitet, verlassen Ihre Zugangsdaten zu keinem Zeitpunkt Ihr Gerät.",[28,400,402],{"id":401},"tipps-vor-dem-gateway-import","Tipps vor dem Gateway-Import",[15,404,405,406,266,408,357,410,412,413,416,417,420,421,424,425,273,427,429],{},"Prüfen Sie vorab, ob Ihr Zielsystem (etwa ",[19,407,344],{},[19,409,347],{},[19,411,353],{},") zwingend ein ",[19,414,415],{},"refresh_token"," (",[19,418,419],{},"rt",") für die automatische Verlängerung benötigt, da der Standard-Aufruf von ",[19,422,423],{},"/api/auth/session"," im Browser oft nur ",[19,426,265],{},[19,428,269],{}," liefert. Speichern Sie exportierte Konfigurationsdateien stets verschlüsselt ab.",{"title":152,"searchDepth":153,"depth":153,"links":431},[432,433,434,435],{"id":280,"depth":153,"text":281},{"id":329,"depth":153,"text":330},{"id":391,"depth":153,"text":392},{"id":401,"depth":153,"text":402},"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":250,"description":436},"blog/de-DE/how-to-convert-chatgpt-session-json-safely",[443,444,445,176],"ChatGPT session converter","JSON","JWT",[336,324,319],"8Rj0TFNJo7zHz5l4qpWzsokgwsi3MCogFS5PG1_3zF0",1793096790264]