Lumaktaw sa pangunahing nilalaman
LibraTool logoLibraTool

Libreng Editor ng Mermaid Diagram

Sumulat ng mga flowchart, sequence diagram, Gantt chart, at iba pa sa Mermaid syntax na may live preview. I-export bilang SVG o PNG. Tumatakbo nang buo sa iyong browser.

πŸ’‘ Sumulat ng diagram sa Mermaid syntax β€” flowchart, sequence diagram, Gantt chart, class diagram, at iba pa β€” at i-export bilang SVG o PNG. Lahat ay tumatakbo sa browser mo: hindi kailanman ina-upload ang teksto ng diagram mo, at ang Mermaid rendering engine ay galing mismo sa site na ito, hindi sa third-party na CDN.

Mga karaniwang gamit

  • Gumawa ng FlowchartLumikha ng flowchart mula sa text at i-export ito bilang image.
  • Iguhit ang Sequence DiagramI-diagram kung paano ang systems o tao ay nakikipag-ugnayan sa paglipas ng panahon.
  • Magdagdag ng Diagram sa READMELumikha ng diagrams na naturally na ginagawa ng GitHub sa iyong README.
  • Bumuo ng Gantt ChartIlatag ang project timeline bilang Gantt chart mula sa text.
  • Lumikha ng Class DiagramI-diagram ang classes at ang kanilang relationships para sa software design.

Paano ito Gumagana

Hinahayaan ka ng Mermaid na magsulat ng mga diagram bilang teksto at awtomatiko itong nire-render β€” mahusay para mapanatili ang mga diagram sa version control. Isa itong live editor na nagre-render habang nagta-type ka.

  1. 1
    Nilo-load ang Mermaid engine
    Nilo-load mula sa LibraTool ang Mermaid library sa unang beses mong gamitin ang tool, saka ito kina-cache ng browser.
  2. 2
    Isinusulat mo ang diagram code
    Flowcharts, sequence diagrams, Gantt charts, class diagrams, pie charts at marami pang iba β€” gamit ang Mermaid's text syntax.
  3. 3
    Nagre-render ito nang live
    Pina-parse ang iyong code at nire-render sa isang SVG sa iyong browser habang nagta-type ka, may light at dark na tema.
  4. 4
    I-export ang SVG o PNG
    I-download ang diagram bilang scalable SVG o 2Γ— PNG upang ilagay sa docs, slides, o README.

Ang iyong diagram code β€” na maaaring naglalarawan ng mga internal na sistema β€” ay nire-render nang buo sa iyong browser at hindi kailanman ina-upload.

Mga Kaugnay na Tool

πŸ“

Markdown Editor

Sumulat at i-preview ang Markdown sa real time. Sinusuportahan ang mga heading, bold, italic, code block, talahanayan, at listahan.

Subukan
🟦

Gumagawa ng CSS Grid

I-design nang visual ang CSS grid β€” tracks, units at gaps β€” at kopyahin ang generated CSS at HTML.

Subukan
🌳

Gumagawa ng ASCII Tree

Gawing malinis na folder tree (β”œβ”€β”€ └──) ang isang indented na listahan para sa mga README at dokumento. Unicode o plain-ASCII na output. Tumatakbo nang buo sa iyong browser.

Subukan

Mga Madalas na Itanong