[{"data":1,"prerenderedAt":453},["ShallowReactive",2],{"blog-post-/blog/ko-kr/how-to-render-and-export-mermaid-diagrams-online":3,"related-posts-/ko-KR/blog/how-to-render-and-export-mermaid-diagrams-online":184},{"id":4,"title":5,"author":6,"body":7,"category":164,"date":165,"description":166,"extension":167,"featured":168,"image":169,"meta":170,"navigation":171,"path":172,"readingTime":173,"seo":174,"stem":175,"tags":176,"tools":181,"__hash__":183},"content/blog/ko-KR/how-to-render-and-export-mermaid-diagrams-online.md","온라인에서 Mermaid 다이어그램 렌더링 및 내보내기: AI 코드를 선명한 SVG·PNG로 변환","Anything Tools Editorial",{"type":8,"value":9,"toc":155},"minimark",[10,14,27,32,41,63,70,74,80,111,115,118,137,141,149,152],[11,12,5],"h1",{"id":13},"온라인에서-mermaid-다이어그램-렌더링-및-내보내기-ai-코드를-선명한-svgpng로-변환",[15,16,17,18,22,23,26],"p",{},"ChatGPT, Claude, DeepSeek 같은 AI 모델은 시스템 아키텍처, 시퀀스 다이어그램, 데이터베이스 ERD를 Mermaid 문법으로 빠르게 작성해 줍니다. 하지만 ",[19,20,21],"code",{},"flowchart TD","나 ",[19,24,25],{},"sequenceDiagram"," 같은 코드 블록을 그대로 파워포인트 슬라이드, 워드 문서, 고객 보고서에 붙여넣을 수는 없습니다. 텍스트 정의를 깔끔한 이미지 파일로 바꾸려면 실시간 미리보기와 내보내기 워크플로우가 필요합니다.",[28,29,31],"h2",{"id":30},"실시간-미리보기로-ai-문법-오류-즉시-잡기","실시간 미리보기로 AI 문법 오류 즉시 잡기",[15,33,34,35,40],{},"코드를 ",[36,37,39],"a",{"href":38},"/dev/mermaid-renderer","Mermaid 렌더러","에 붙여넣으면 오른쪽 캔버스에 즉시 다이어그램이 그려집니다. AI가 생성한 코드에서 구문 오류가 발생할 때 가장 흔한 원인은 노드 레이블 안에 따옴표 없이 괄호나 콜론이 포함된 경우입니다.",[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,79],{},"어두운 코드 에디터에서 잘 보이던 다이어그램도 흰색 슬라이드 배경에 올리면 대비가 떨어질 수 있습니다. 내보내기 전에 ",[36,78,39],{"href":38}," 상단 툴바에서 외형을 조정해 보세요.",[81,82,83,105],"ol",{},[45,84,85,88,89,92,93,96,97,100,101,104],{},[48,86,87],{},"테마(Theme)",": 인쇄 문서나 밝은 슬라이드에는 ",[19,90,91],{},"default"," 또는 ",[19,94,95],{},"neutral",", 다크 모드 화면에는 ",[19,98,99],{},"dark",", 차분한 기술 문서에는 ",[19,102,103],{},"forest","가 적합합니다.",[45,106,107,110],{},[48,108,109],{},"클래식 vs 손그림 스타일(Look)",": 최종 아키텍처와 ERD에는 정교한 클래식 스타일을 사용하고, 초기 기획 회의에서는 손그림(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 삽입이 제한되는 환경에 적합합니다. 웹사이트 게시용으로 파일 용량을 더 줄이고 싶다면 ",[36,133,135],{"href":134},"/image/converter","이미지 변환기","를 사용해 WebP나 AVIF로 변환할 수 있습니다.",[28,138,140],{"id":139},"markdown-문서-발행-워크플로우와-결합하기","Markdown 문서 발행 워크플로우와 결합하기",[15,142,143,144,148],{},"전체 기술 사양서를 Markdown으로 작성 중이라면 먼저 다이어그램을 검증해 이미지로 내보낸 뒤, 본문은 ",[36,145,147],{"href":146},"/text/markdown-to-html","Markdown HTML 변환기","로 정리하세요. 원본 Mermaid 코드를 저장소나 문서 주석에 함께 보관해 두면 나중에 구조가 바뀌어도 몇 줄만 수정해 즉시 새 다이어그램을 뽑을 수 있습니다.",[28,150,151],{"id":151},"마무리",[15,153,154],{},"Mermaid는 다이어그램을 코드처럼 버전 관리할 수 있게 해 주며, 브라우저 렌더러는 그 문법을 즉시 발표 가능한 그래픽으로 바꿔 줍니다. 복잡한 노드 이름에 큰따옴표를 쓰고, 배경에 맞는 테마를 고른 뒤 목적에 맞게 SVG나 PNG로 내보내 보세요.",{"title":156,"searchDepth":157,"depth":157,"links":158},"",2,[159,160,161,162,163],{"id":30,"depth":157,"text":31},{"id":72,"depth":157,"text":73},{"id":113,"depth":157,"text":114},{"id":139,"depth":157,"text":140},{"id":151,"depth":157,"text":151},"Developer Tools","2026-10-27T00:00:00.000Z","브라우저에서 Mermaid 순서도, 시퀀스 다이어그램, ERD를 실시간 미리보기하고 문법 오류를 수정해 깔끔한 SVG 또는 PNG로 내보내는 방법.","md",false,"/blog/how-to-render-and-export-mermaid-diagrams-online.png",{},true,"/blog/ko-kr/how-to-render-and-export-mermaid-diagrams-online",5,{"title":5,"description":166},"blog/ko-KR/how-to-render-and-export-mermaid-diagrams-online",[177,178,179,180],"Mermaid renderer","diagram to SVG","flowchart","developer tools",[182,38,146,134],"/dev/svg-viewer","lBBC19xH5R01chjkDtH83pZ4iYr6Gt58ZfS5Y1qk_2M",[185,253],{"id":186,"title":187,"author":6,"body":188,"category":164,"date":240,"description":241,"extension":167,"featured":168,"image":242,"meta":243,"navigation":171,"path":244,"readingTime":173,"seo":245,"stem":246,"tags":247,"tools":251,"__hash__":252},"content/blog/de-DE/convert-image-to-base64-guide.md","Convert Images to Base64: When It Helps and When It Hurts",{"type":8,"value":189,"toc":234},[190,193,196,199,212,215,222,225,228,231],[11,191,187],{"id":192},"convert-images-to-base64-when-it-helps-and-when-it-hurts",[15,194,195],{},"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,197,198],{"id":198},"核心思路",[15,200,201,202,206,207,211],{},"Use the ",[36,203,205],{"href":204},"/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,208,210],{"href":209},"/dev/base64","Base64 Encoder/Decoder"," is the simpler companion.",[28,213,214],{"id":214},"适用场景",[15,216,217,218,221],{},"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,219,220],{"href":134},"Image Converter",".",[28,223,224],{"id":224},"性能取舍",[15,226,227],{},"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,229,230],{"id":230},"最后检查",[15,232,233],{},"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":156,"searchDepth":157,"depth":157,"links":235},[236,237,238,239],{"id":198,"depth":157,"text":198},{"id":214,"depth":157,"text":214},{"id":224,"depth":157,"text":224},{"id":230,"depth":157,"text":230},"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":187,"description":241},"blog/de-DE/convert-image-to-base64-guide",[248,249,180,250],"base64","image encoding","web performance",[204,209,134],"T9fy8iDSs-jO4VkKmehuIai9nm-fgE0ZjLx5T5-3BX4",{"id":254,"title":255,"author":6,"body":256,"category":164,"date":165,"description":441,"extension":167,"featured":168,"image":442,"meta":443,"navigation":171,"path":444,"readingTime":173,"seo":445,"stem":446,"tags":447,"tools":451,"__hash__":452},"content/blog/de-DE/how-to-convert-chatgpt-session-json-safely.md","ChatGPT-Session-JSON sicher im Browser konvertieren",{"type":8,"value":257,"toc":435},[258,261,283,287,290,319,332,336,371,394,398,404,408],[11,259,255],{"id":260},"chatgpt-session-json-sicher-im-browser-konvertieren",[15,262,263,264,267,268,271,272,271,275,278,279,282],{},"Wer selbst gehostete KI-Gateways, Coding-Assistenten oder Account-Pools verwaltet, muss häufig Rohdaten aus ",[19,265,266],{},"https://chatgpt.com/api/auth/session"," in das Konfigurationsschema des jeweiligen Zielsystems überführen. Felder wie ",[19,269,270],{},"accessToken",", ",[19,273,274],{},"sessionToken",[19,276,277],{},"refreshToken"," und ",[19,280,281],{},"account.id"," manuell aus Dutzenden JSON-Dateien zu kopieren ist fehleranfällig – und echte Zugangsdaten auf fremde Server hochzuladen ist ein erhebliches Sicherheitsrisiko.",[28,284,286],{"id":285},"was-in-einem-session-payload-steckt","Was in einem Session-Payload steckt",[15,288,289],{},"Eine typische ChatGPT-Session-Antwort enthält neben Metadaten hochsensible Authentifizierungsdaten:",[42,291,292,301,311],{},[45,293,294,300],{},[48,295,296,278,298],{},[19,297,270],{},[19,299,274],{},": Inhabertokens, die direkten Zugriff auf das Konto gewähren.",[45,302,303,310],{},[48,304,305,278,308],{},[19,306,307],{},"user.email",[19,309,281],{},": Kennungen zur Zuordnung und zum Routing innerhalb eines Gateways.",[45,312,313,318],{},[48,314,315],{},[19,316,317],{},"expires",": Der ISO-Zeitstempel für das Ablaufdatum der aktuellen Sitzung.",[15,320,321,322,326,327,331],{},"Vor der Umwandlung können Sie unübersichtliche Dateien im ",[36,323,325],{"href":324},"/dev/json-formatter","JSON-Formatter"," prüfen oder enthaltene Token-Claims samt Ablaufzeitpunkt im ",[36,328,330],{"href":329},"/dev/jwt-decoder","JWT-Decoder"," lokal auslesen.",[28,333,335],{"id":334},"einzelne-daten-oder-datei-batches-lokal-umwandeln","Einzelne Daten oder Datei-Batches lokal umwandeln",[15,337,338,339,343,344,271,347,271,350,271,353,271,356,271,359,362,363,366,367,370],{},"Öffnen Sie den ",[36,340,342],{"href":341},"/dev/chatgpt-session-converter","ChatGPT-Session-Konverter"," und wählen Sie oben das gewünschte Zielformat (",[19,345,346],{},"Sub2API",[19,348,349],{},"CPA",[19,351,352],{},"Cockpit",[19,354,355],{},"9Router",[19,357,358],{},"Codex",[19,360,361],{},"AxonHub"," oder ",[19,364,365],{},"Codex-Manager","). Sie können JSON-Text direkt einfügen oder mehrere ",[19,368,369],{},".json","-Dateien per Drag-and-drop ablegen:",[81,372,373,379,385],{},[45,374,375,378],{},[48,376,377],{},"automatische Feldzuordnung",": E-Mail-Adresse, Account-ID, Ablaufdatum und Tokens werden automatisch aus Einzelobjekten oder Arrays extrahiert.",[45,380,381,384],{},[48,382,383],{},"Übersichtstabelle und Fehlerprüfung",": Eine Vorschautabelle zeigt alle erkannten Konten und meldet übersprungene Einträge, falls erforderliche Tokens fehlen.",[45,386,387,390,391,393],{},[48,388,389],{},"Direkter Export",": Kopieren Sie das fertige JSON in die Zwischenablage oder laden Sie die ",[19,392,369],{},"-Datei direkt herunter.",[28,395,397],{"id":396},"warum-lokale-browser-verarbeitung-entscheidend-ist","Warum lokale Browser-Verarbeitung entscheidend ist",[15,399,400,401,403],{},"Session- und Refresh-Tokens sind so sensibel wie Passwörter. Da der ",[36,402,342],{"href":341}," vollständig lokal im Browser-Tab ohne Netzwerkanfragen arbeitet, verlassen Ihre Zugangsdaten zu keinem Zeitpunkt Ihr Gerät.",[28,405,407],{"id":406},"tipps-vor-dem-gateway-import","Tipps vor dem Gateway-Import",[15,409,410,411,271,413,362,415,417,418,421,422,425,426,429,430,278,432,434],{},"Prüfen Sie vorab, ob Ihr Zielsystem (etwa ",[19,412,349],{},[19,414,352],{},[19,416,358],{},") zwingend ein ",[19,419,420],{},"refresh_token"," (",[19,423,424],{},"rt",") für die automatische Verlängerung benötigt, da der Standard-Aufruf von ",[19,427,428],{},"/api/auth/session"," im Browser oft nur ",[19,431,270],{},[19,433,274],{}," liefert. Speichern Sie exportierte Konfigurationsdateien stets verschlüsselt ab.",{"title":156,"searchDepth":157,"depth":157,"links":436},[437,438,439,440],{"id":285,"depth":157,"text":286},{"id":334,"depth":157,"text":335},{"id":396,"depth":157,"text":397},{"id":406,"depth":157,"text":407},"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":255,"description":441},"blog/de-DE/how-to-convert-chatgpt-session-json-safely",[448,449,450,180],"ChatGPT session converter","JSON","JWT",[341,329,324],"8Rj0TFNJo7zHz5l4qpWzsokgwsi3MCogFS5PG1_3zF0",1793096937345]