2/1/2022

Text To Sequence Diagram

The DSL to define sequence diagrams in ZenUML. I started using sequence diagrams heavily around 2006. Since then, I have tried quite a few tools, including PlantUML. I like the idea of generating diagrams from text because I hate to constantly drag-and-drop and double-click to edit names etc. One thing I am not quite happy with PlantUML is its DSL. A simple javascript library to turn text into vector UML sequence diagrams. Heavily inspired by websequencediagrams.com, who offer a serverside solution. We use Jison to parse the text, and Snap.svg to draw the image. Second, a sequence of messages can be declared to be a fragment of the diagram. A fragment is represented by a frame surrounding those messages. It has a type (for example: alt, cond, or opt), appearing in the top-left corner, and a text, appearing in square brackets at the top of the frame. The text typically represents a condition.

Convert Simple Text to UML Sequence Diagram via Open Source Free JavaScript Library.

Text To Sequence Diagram
  • If you decide to add use case text to your sequence diagram, add it in the left margin of the diagram as shown in Figure 3. Step 3: Select Classes to Carry out the System Response When choosing the classes that carry out the system response, you need to examine each step of the use case and add the appropriate classes to the diagram.
  • Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs. Mermaid lets you create diagrams and visualizations using text and code. It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

Overview

JS-Sequence-Diagrams give software developers the capability to generate UML sequence diagrams from simple text via open source JavaScript library. A sequence diagram shows the objects and classes involved in the development and the order of messages exchanged between the objects. The library uses Jison to parse the text, and Snap.svg to draw the image.

It draws simple SVG sequence diagrams from the textual representation of the diagram. The library includes two styles to render the diagram, the “normal” and the “hand-drawn”. There are several CSS classes provided for SVG diagram customization.

At A Glance

An overview of JS Sequence Diagrams features.

  • Generate Diagram
  • Text to Diagram
  • UML Diagram
  • Style Diagram
  • Diagram to SVG
  • Customized Diagram
JS Sequence Diagrams
PreviousNext

Getting Started with JS Sequence Diagrams

The recommended way to install JS Sequence Diagrams is to run bower install bramp/js-sequence-diagrams and include the scripts below:

Text to sequence diagram

also, import the CSS if you plan to use the hand-drawn theme:

Import CSS plan for a hand-drawn theme

Composer offers a convenient installer that you can execute directly from the command line. Feel free to download this file or review it on GitHub.

Text To Sequence Diagram

Generate UML Sequence Diagrams from Simple Text

JS Sequence Diagrams library enables software developers to generate UML sequence diagrams from simple text. The library allows you to add diagram title and place notes over multiple participants. The latest release uses Snap.svg along with Raphaël for drawing the diagrams. Snap.svg is a pure SVG implementation and permits the usage of CSS styling, better font support, animations and more.

Export Diagram to SVG via JavaScript API

Diagram

JS Sequence Diagrams provides features for exporting diagrams to SVG via open source JavaScript API. Once the diagram is created, the API allows users to download it in the SVG format into the location of their choice. JS Sequence Diagrams has included several important CSS classes that can be applied to the SVG diagram when using snap.svg. It has included sequence classes for applying to main SVG tag, title class for the title of the diagram, actor class for applying to the actors, note class for all notes and signal class for applying to the signals.

A comprehensive list of various text to diagram tools.

  1. Markdeephttps://casual-effects.com/markdeep/
    markdown, ascii-to-all

  2. Svgbobhttps://ivanceras.github.io/svgbob-editor/
    ascii-to-all

  3. asciigridhttps://mbarkhau.keybase.pub/asciigrid/
    ascii-to-all
    draw in ascii in left panel and see the diagram in right panel. uses svgbob

  4. Archetypehttps://fatiherikli.github.io/archetype/
    ascii-drawing

  5. Textikhttps://textik.com/
    ascii-drawing

  6. ASCIIFlowhttp://asciiflow.com/
    ascii-drawing

  7. textikhttps://textik.com/
    ascii-drawing

  8. fsymbolshttps://fsymbols.com/draw/
    ascii-drawing

  9. Pikchrhttps://pikchr.org/home/pikchrshow
    all

  10. Krokihttps://kroki.io/
    BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag, RackDiag, BPMN, Bytefield, PlantUML, Ditaa, Erd, Excalidraw, GraphViz, Mermaid, Nomnoml, PlantUML, SvgBob, UMLet, Vega, Vega-Lite, WaveDrom

  11. mscgen_jshttps://mscgen.js.org/
    sequence

  12. BPMN Sketch Minerhttps://www.bpmn-sketch-miner.ai/
    BPMN/flow

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

  14. Webgraphvizhttp://www.webgraphviz.com/
    graphviz

  15. Viz.jshttp://viz-js.com/
    graphviz

  16. Edotorhttps://edotor.net/
    graphviz

  17. nomnomlhttp://www.nomnoml.com/
    activity, class
    Source: https://github.com/skanaar/nomnoml

  18. CodeUMLhttp://codeuml.com/ (dead)
    uml
    Source: https://github.com/oazabir/codeuml

  19. yumlhttps://yuml.me/diagram/scruffy/class/draw
    uml

  20. PlantTexthttp://www.planttext.com/planttext
    activity, class, component, object, use case, state, graphviz, sequence, gui, earth

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

  22. Umple Onlinehttp://cruise.site.uottawa.ca/umpleonline/
    class, state, composite

  23. ZenUMLhttps://app.zenuml.com/
    sequence

  24. DotUMLhttps://dotuml.com/playground.html
    class, use case, sequence, state, deployment, graphviz

  25. QuickDBDhttps://app.quickdatabasediagrams.com/#/
    entity-relationship

  26. dbdiagramhttps://dbdiagram.io/d
    entity-relationship

  27. WebSequenceDiagramshttps://www.websequencediagrams.com/
    sequence

  28. SVG Sequence Diagramhttp://sullerandras.github.io/SVG-Sequence-Diagram/
    sequence

  29. JUMLYhttp://jumly.tmtk.net (dead)
    sequence
    Source: https://github.com/tmtk75/jumly

  30. js sequence diagramshttp://bramp.github.io/js-sequence-diagrams/
    sequence

  31. swimlaneshttps://swimlanes.io/
    sequence

  32. SequenceDiagramhttps://sequencediagram.org/
    sequence

  33. GraphUphttps://graphup.co/ (broken)
    sequence, gantt

  34. Diagwizhttps://diagwiz.io/playground/
    ascii sequence

  35. Text Diagramhttp://weidagang.github.io/text-diagram/
    ascii sequence
    Source: https://github.com/weidagang/text-diagram

  36. ASCII Sequence Diagram Creatorhttps://textart.io/sequence
    ascii sequence

  37. Chart Magehttp://chartmage.com/index.html
    sequence, flow

  38. flowchart.jshttp://flowchart.js.org/
    flow

  39. drawthehttp://go.drawthe.net/
    network
    Source: https://github.com/cidrblock/drawthe.net

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

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

  42. Blockdiaghttp://interactive.blockdiag.com/
    block, activity, network, rack/stack, packet

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

  44. XState Visualizerhttps://xstate.js.org/viz/
    state
    Source: https://github.com/davidkpiano/xstate

  45. MetaUMLhttps://metauml.denksoft.com (dead)

  46. Railroad Diagram Generatorhttp://www.bottlecaps.de/rr/ui#_StringLiteral
    railroad/syntax

  47. Gleekhttps://www.gleek.io/
    architecture, sequence, entity-relationship, class

  48. Ilographhttps://app.ilograph.com/
    architecture

  49. Structurizrhttps://structurizr.com/dsl
    architecture

  50. Penrosehttps://github.com/penrose/penrose
    penrose

  51. code2flowhttps://app.code2flow.com/
    flow

  52. flowchart.funhttps://flowchart.fun/
    flow

  53. WaveDromhttps://wavedrom.com/editor.html
    timing

  54. CLI Text to Diagram Tools

    1. perl graph-easyhttp://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]

Text To Sequence Diagrams

This list is being maintained with Dynalist

Sequence Diagram Example

>> Home