Editor mermaid en línia, visual i codi en un sol lloc

La majoria d'editors mermaid et donen un quadre de text i una previsualització. Aquest també et dona un llenç: fes clic per afegir un bloc, arrossega una fletxa, agrupa elements en àrees — i el codi mermaid s'escriu sol. Canvia a la pestanya de codi i edita'l a mà; el llenç ho segueix.

  • Es renderitza mentre escrius

    El motor mermaid real, redibuixat uns centenars de mil·lisegons després de la teva última tecla.

  • Codi i llenç sincronitzats

    Edita qualsevol dels dos costats. L'altre s'actualitza — sense copiar i enganxar entre dues eines.

  • 14 formes de node

    Rectangle, arrodonit, píndola, cercle, rombe, base de dades, hexàgon i la resta, amb un clic cadascuna.

  • Gratuït i sense registre

    Sense prova ni marca d'aigua: l'editor s'obre a l'instant. Inicia sessió només si vols més d'un diagrama.

Un llenç, no només un quadre de text

La pestanya visual és un editor real sobre el diagrama renderitzat: fes clic a un node per seleccionar-lo, doble clic per reanomenar-lo in situ, arrossega on sigui per desplaçar la vista.

  • Fes clic per construirAfegeix un bloc, apunta una fletxa cap a un altre, etiqueta la fletxa. Cap sintaxi per memoritzar abans de començar.

  • Tria una formaCatorze formes de flowchart mermaid — rombes de decisió, cilindres de base de dades, subrutines — des d'un sol selector.

  • Acoloreix el que vulguisVuit predefinits més un selector de color, aplicats a un sol node o a una àrea sencera.

Codi mermaid que continua sent teu

La pestanya de text és mermaid pur — la mateixa sintaxi que GitHub, GitLab, Notion i Obsidian ja renderitzen. Res aquí és un format propietari.

  • Escriu-lo a màEscriu mermaid directament i mira com es renderitza. Sis exemples ja fets per començar.

  • Va i tornaEls flowcharts que enganxes es tornen a analitzar al llenç — nodes, formes, colors, subgrafs i tot.

  • Tots els tipus de diagramaFlowchart, seqüència, classe, estat, ER, gantt, git graph, pie — la previsualització renderitza tot el que mermaid admet.

Els diagrames grans es mantenen llegibles

Els diagrames d'arquitectura superen una pantalla de seguida. El desplaçament, el zoom i l'agrupació estan fets per a això en lloc de lluitar-hi en contra.

  • Àrees i imbricacióAgrupa blocs en subgrafs, imbrica una àrea dins d'una altra, mou un subarbre sencer amb un sol gest.

  • Zoom del 2% al 1600%Desplaça't fent scroll, ctrl+scroll per fer zoom, o torna a centrar amb un botó.

  • Desat sobre la marxaEl diagrama es desa sol al navegador mentre edites. Si inicies sessió, es desa al teu compte i t'acompanya a qualsevol dispositiu.

Exporta i continua

Res queda tancat. Emporta't la imatge, el codi font, o un bloc Markdown a punt per enganxar en un document.

  • Sense mur de pagamentTotes les funcions, inclosa l'exportació, són gratuïtes. No hi ha cap pla de pagament al qual actualitzar.

  • Es renderitza al teu navegadorEl renderitzat passa al teu navegador; sense compte el diagrama no en surt mai, i amb compte el document desat t'acompanya a qualsevol dispositiu.

  • SVG, PNG, .mmd, .mdCopia el codi SVG, descarrega un PNG a 2x, desa el codi font mermaid, o agafa un bloc Markdown amb delimitadors.

Com es compara amb les opcions habituals

Les eines de diagrama-com-a-codi et fan escriure-ho tot a mà. Les eines d'arrossegar i deixar anar et donen una imatge que no pots comparar amb diff. Aquesta es nega a triar bàndol.

Començar

IQ Mermaid: Fes doble clic al llenç i apareix un node. Pots aprendre la sintaxi més tard, o mai.

Eina típica: Llegeix primer la referència de sintaxi, o accepta una eina de dibuix sense cap representació en text.

El format de sortida

IQ Mermaid: Mermaid pur — el mateix text que GitHub, GitLab i Notion renderitzen de manera nativa.

Eina típica: Un fitxer propietari que només s'obre a l'eina que el va crear.

Editar més tard

IQ Mermaid: Canvia el codi o mou els blocs. Totes dues direccions funcionen sobre el mateix diagrama.

Eina típica: Només una direcció: les eines basades en codi no tenen llenç, les basades en llenç no tenen codi font.

Preu

IQ Mermaid: Gratuït — ni tan sols cal un correu.

Eina típica: Pla gratuït limitat a uns pocs diagrames, amb l'exportació o la col·laboració darrere d'una subscripció.

On viuen les dades

IQ Mermaid: Al teu navegador, o al teu compte si vols que t'acompanyi a qualsevol dispositiu.

Eina típica: Un compte al servidor d'algú, amb els teus diagrames enganxats a ell.

Preguntes sobre l'editor mermaid

Per començar només cal obrir la pàgina.

Què és mermaid?

Mermaid és una sintaxi de text per a diagrames: descrius nodes i fletxes en unes poques línies, i un renderitzador dibuixa la imatge. GitHub, GitLab, Notion i Obsidian el renderitzen dins de Markdown, així que un bloc mermaid es manté llegible en un pull request o una pàgina de wiki.

Aquest editor mermaid és realment gratuït?

Sí. Totes les funcions, inclosa l'exportació a SVG i PNG, són gratuïtes, i pots fer servir l'editor sense crear res. Un compte gratuït opcional afegeix més diagrames desats i sincronització entre dispositius: no hi ha pla de pagament i no es reserva res.

Necessito saber la sintaxi de mermaid?

No. Comença a la pestanya visual: fes doble clic al llenç per afegir un bloc, selecciona'l i dibuixa una fletxa cap a un altre. El codi mermaid es genera per tu i el pots llegir quan vulguis aprendre la sintaxi.

Quins tipus de diagrama són compatibles?

La pestanya de codi renderitza tot el que mermaid admet — flowchart, seqüència, classe, estat, relació d'entitats, gantt, git graph, pie i més. El llenç visual edita flowcharts específicament, que és el que és la majoria dels diagrames.

Puc exportar a PNG o SVG?

Sí. Copia el codi SVG al porta-retalls, descarrega el fitxer SVG, o descarrega un PNG renderitzat a 2x per a presentacions i documents. També pots desar el codi font mermaid com a .mmd o com a bloc Markdown.

On es desa el meu diagrama?

Sense compte, el teu únic diagrama es desa al navegador, així que hi és quan tornes al mateix dispositiu. Si inicies sessió, es desa al teu compte i pot acompanyar-te a un altre dispositiu. Exporta la font si vols una còpia pròpia.

Puc enganxar un diagrama mermaid existent?

Sí. Enganxa'l a la pestanya de codi; un flowchart es torna a analitzar al llenç visual amb els seus nodes, formes, colors i subgrafs intactes. Altres tipus de diagrama es renderitzen a la previsualització però queden només en codi.

Funciona sense connexió?

El render passa totalment al navegador: un cop carregada la pàgina, l'editor continua funcionant sense connexió.

Obre l'editor. Gratuït — sense registre.

Un llenç en blanc, una pestanya de codi i totes les opcions d'exportació — gratuïtes, al teu navegador, ara mateix.