# bramp/js-sequence-diagrams

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/bramp-js-sequence-diagrams).**

7,834 stars · 1,074 forks · JavaScript · BSD-2-Clause

## Links

- GitHub: https://github.com/bramp/js-sequence-diagrams
- Homepage: https://bramp.github.io/js-sequence-diagrams/
- awesome-repositories: https://awesome-repositories.com/repository/bramp-js-sequence-diagrams.md

## Topics

`javascript` `sequence-diagram` `svg`

## Description

js-sequence-diagrams is a JavaScript library used to generate SVG sequence diagrams from plain text descriptions. It functions as a text-to-diagram tool that transforms structured textual input into scalable vector graphics to represent system interaction flows.

The library provides capabilities for system workflow visualization and technical documentation automation. It maps the communication between different components or services by converting text into visual representations of logic flows.

The tool includes support for custom typeface loading to change the visual style and lettering of the generated graphics.

## Tags

### Software Engineering & Architecture

- [Text-to-Diagram Generators](https://awesome-repositories.com/f/software-engineering-architecture/text-to-diagram-generators.md) — Renders sequence diagrams from structured text descriptions to visualize system interaction flows. ([source](https://cdn.jsdelivr.net/gh/bramp/js-sequence-diagrams@master/README.md))
- [Workflow Visualizations](https://awesome-repositories.com/f/software-engineering-architecture/workflow-visualizations.md) — Maps the step-by-step communication between different services and components in a technical environment.

### Development Tools & Productivity

- [Sequence Diagrams](https://awesome-repositories.com/f/development-tools-productivity/diagramming-tools/system-architecture-visualizers/sequence-diagrams.md) — Generates visual sequence diagrams to map the logic flow and interaction between system components.

### Graphics & Multimedia

- [Text-to-SVG Generators](https://awesome-repositories.com/f/graphics-multimedia/text-to-svg-generators.md) — Transforms structured textual representations of system interactions directly into scalable vector graphics.
- [SVG Path Calculations](https://awesome-repositories.com/f/graphics-multimedia/coordinate-based-vector-processing/svg-path-calculations.md) — Calculates the specific SVG coordinates and paths required to render sequence flow arrows.
- [Coordinate Calculation Engines](https://awesome-repositories.com/f/graphics-multimedia/coordinate-calculation-engines.md) — Implements a geometric engine to calculate spatial coordinates and paths for diagram elements.
- [SVG Graphic Drawing](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/vector-graphics-resources/svg-graphic-drawing.md) — Uses SVG elements to construct custom shapes and typography for technical diagrams.

### Content Management & Publishing

- [Technical Documentation](https://awesome-repositories.com/f/content-management-publishing/documentation-knowledge-management/technical-documentation.md) — Automates the creation of architecture diagrams from text for consistent technical documentation.

### Programming Languages & Runtimes

- [Text Parsers](https://awesome-repositories.com/f/programming-languages-runtimes/text-parsers.md) — Parses text-based input streams line-by-line to determine participants and the order of system interactions.

### Part of an Awesome List

- [Data Visualization](https://awesome-repositories.com/f/awesome-lists/devtools/data-visualization.md) — Generates sequence diagrams from text.