Online text to diagram tools

2024/07/26

A comprehensive list of various text to diagram tools. Ordered roughly by recency and similarity. CTRL+F on this page to find required tool for specific needs.

Online/Browser Based Text-to-Diagram tools

These tools don’t need to be downloaded or installed. Open the URL and start writing text to generate diagrams right from your web-browser.

  1. D2 https://play.d2lang.com/
    all

  2. Pikchr https://pikchr.org/home/pikchrshow
    all

  3. Diagon https://arthursonzogni.com/Diagon
    text-to-ascii, sequence, tree, table, syntax, flow, graph, frame
    Source: https://github.com/ArthurSonzogni/Diagon

  4. Typograms https://code.sgo.to/typograms/
    markdown, ascii-to-all Source: https://github.com/samuelgoto/typograms

  5. Markdeep https://casual-effects.com/markdeep/
    markdown, ascii-to-all

  6. Svgbob https://ivanceras.github.io/bob-editor/ https://ivanceras.github.io/svgbob-editor/
    ascii-to-all

  7. asciigrid https://mbarkhau.github.io/asciigrid
    ascii-to-all
    draw in ascii in left panel and see the diagram in right panel. uses svgbob
    Source: https://github.com/mbarkhau/asciigrid

  8. shaky https://shaky.github.bushong.net/ ascii-to-all
    Source: https://github.com/dbushong/shaky

  9. MonoSketch https://app.monosketch.io
    asii-drawing
    Source: https://github.com/tuanchauict/MonoSketch

  10. Archetype https://fatiherikli.github.io/archetype/ (wayback: https://web.archive.org/web/20210503172024/https://fatiherikli.github.io/archetype/)
    ascii-drawing
    Forked Source: https://github.com/cagataycali/archetype
    Backup: https://smusamashah.github.io/archetype/

  11. Textik https://textik.com/
    ascii-drawing

  12. ASCIIFlow http://asciiflow.com/
    ascii-drawing

  13. textik https://textik.com/
    ascii-drawing

  14. fsymbols https://fsymbols.com/draw/
    ascii-drawing

  15. Kroki https://kroki.io/
    BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag, RackDiag, BPMN, Bytefield, C4 (with PlantUML), D2, DBML, Ditaa, Erd, Excalidraw, GraphViz, Mermaid, Nomnoml, Pikchr, PlantUML, Structurizr, SvgBob, TikZ, UMLet, Vega, Vega-Lite, WaveDrom, WireViz

  16. Markwhen https://app.markwhen.com/
    timeline/gantt
    Source: https://github.com/mark-when/markwhen

  17. flowchart.fun https://flowchart.fun/
    flow

  18. flowchart.js http://flowchart.js.org/
    flow

  19. code2flow https://app.code2flow.com/
    flow

  20. JSSM https://stonecypher.github.io/jssm-viz-demo/graph_explorer.html
    flow, state
    Source: https://github.com/StoneCypher/jssm

  21. SequenceDiagram https://sequencediagram.org/
    sequence

  22. WebSequenceDiagrams https://www.websequencediagrams.com/
    sequence

  23. SVG Sequence Diagram http://sullerandras.github.io/SVG-Sequence-Diagram/
    sequence

  24. JUMLY http://jumly.tmtk.net (dead)
    sequence
    Source: https://github.com/tmtk75/jumly

  25. js sequence diagrams http://bramp.github.io/js-sequence-diagrams/
    sequence

  26. swimlanes https://swimlanes.io/
    sequence

  27. mscgen_js https://mscgen.js.org/
    sequence

  28. GraphUp https://graphup.co/ (dead)
    sequence, gantt

  29. Diagwiz https://diagwiz.io/playground/
    ascii sequence

  30. Text Diagram http://weidagang.github.io/text-diagram/
    ascii sequence
    Source: https://github.com/weidagang/text-diagram

  31. ASCII Sequence Diagram Creator https://textart.io/sequence
    ascii sequence

  32. Chart Mage http://chartmage.com/index.html
    sequence, flow

  33. BPMN Sketch Miner https://www.bpmn-sketch-miner.ai/
    BPMN/flow

  34. dagre-svg https://andrewfulrich.gitlab.io/dagre-svg/
    graph
    Source: https://gitlab.com/andrewfulrich/dagre-svg

  35. Graphviz Visual Editor http://magjac.com/graphviz-visual-editor/
    graphviz
    Source: https://github.com/magjac/graphviz-visual-editor

  36. Webgraphviz http://www.webgraphviz.com/
    graphviz

  37. Viz.js http://viz-js.com/
    graphviz

  38. Edotor https://edotor.net/
    graphviz

  39. Graphviz Online https://dreampuf.github.io/GraphvizOnline/
    graphviz

  40. Sketchviz https://sketchviz.com/new
    graphviz

  41. nomnoml http://www.nomnoml.com/
    activity, class
    Source: https://github.com/skanaar/nomnoml

  42. CodeUML http://codeuml.com/ (dead)
    uml
    Source: https://github.com/oazabir/codeuml

  43. yuml https://yuml.me/diagram/scruffy/class/draw
    uml

  44. PlantText http://www.planttext.com/planttext
    activity, class, component, object, use case, state, graphviz, sequence, gui, earth

  45. PlantUML http://www.plantuml.com/plantuml/uml/
    activity, class, component, object, use-case, sequence, state, deployment, timing, gui, archimate, gantt, mindmap, tree, math, entity-relationship

  46. Umple Online http://cruise.site.uottawa.ca/umpleonline/
    class, state, composite

  47. ZenUML https://app.zenuml.com/
    sequence

  48. DotUML https://dotuml.com/playground.html
    class, use case, sequence, state, deployment, graphviz

  49. Database Diagram Tool https://databasediagram.com/app
    entity-relationship

  50. QuickDBD https://app.quickdatabasediagrams.com/#/
    entity-relationship

  51. dbdiagram https://dbdiagram.io/d
    entity-relationship
    (Requires Login to Export)

  52. ERD Lab https://app.erdlab.io/designer/guest
    entity-relationship
    (Requires Login to Export)

  53. drawthe http://go.drawthe.net/
    network
    Source: https://github.com/cidrblock/drawthe.net

  54. mermaid https://mermaid-js.github.io/mermaid-live-editor/
    flow, sequence, class, state, entity-relationship, gantt, pie, journey

  55. Diagram.codes https://www.diagram.codes/
    flow, sequence, graph, tree, onion, stack, system, timeline, mindmap

  56. Blockdiag http://interactive.blockdiag.com/
    block, activity, network, rack/stack, packet

  57. state machine cat https://state-machine-cat.js.org/
    state
    Source: https://github.com/sverweij/state-machine-cat

  58. XState Visualizer https://xstate.js.org/viz/
    state
    Source: https://github.com/davidkpiano/xstate

  59. MetaUML https://metauml.denksoft.com (dead)
    Source: https://github.com/ogheorghies/MetaUML

  60. Railroad Diagram Generator http://www.bottlecaps.de/rr/ui#_StringLiteral
    railroad/syntax

  61. Syntax Diagram Generator https://lukaslueg.github.io/macro_railroad_wasm_demo/
    railroad/syntax

  62. GrammKit https://dundalek.com/grammkit/
    railroad/syntax

  63. DrawGrammar https://jacquev6.github.io/DrawGrammar/
    railroad/syntax

  64. Railroad Diagram Generator https://tabatkins.github.io/railroad-diagrams/generator.html
    railroad/syntax
    Source: https://github.com/tabatkins/railroad-diagrams

  65. Gleek https://www.gleek.io/
    architecture, sequence, entity-relationship, class
    (Requires login)

  66. Ilograph https://app.ilograph.com/
    architecture

  67. Structurizr https://structurizr.com/dsl
    architecture

  68. Penrose https://github.com/penrose/penrose
    penrose

  69. WaveDrom https://wavedrom.com/editor.html
    timing
    Source: https://github.com/wavedrom/wavedrom

CLI Text-to-Diagram Tools

These tools need to be downloaded. Pass diagram text as arguments on the CLI to get the diagram.

  1. ditaa https://ditaa.sourceforge.net/ ascii-to-all

  2. perl graph-easy http://bloodgate.com/perl/graph/index.html #cli
    flow
    Doc: https://developpaper.com/recommend-a-tool-for-making-ascii-flow-chart-graph-easy
    Example: graph-easy <<< [node 1]->[some text]-[this][node 1]->[branch]

  3. GoAT: Go ASCII Tool https://github.com/blampe/goat
    ascii-to-all

  4. protocol https://www.luismg.com/protocol/
    ascii-packet
    Source: https://github.com/luismartingarcia/protocol
    Doc: https://www.luismg.com/protocol/
    Example: python protocol.py "time: 4, x: 6, y: 6" --bits 8

This list is being maintained manually

>> Home