# mdaines/viz-js **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/mdaines-viz-js).** 4,296 stars · 367 forks · JavaScript · mit ## Links - GitHub: https://github.com/mdaines/viz-js - Homepage: https://viz-js.com/ - awesome-repositories: https://awesome-repositories.com/repository/mdaines-viz-js.md ## Topics `dot` `emscripten` `graphviz` `javascript` ## Description viz-js is a JavaScript rendering library and graph visualization engine that converts Graphviz DOT language descriptions into visual diagrams. It functions as a Graphviz rendering library designed to produce SVG output for web applications. The project utilizes a WebAssembly port of the Graphviz C library to execute layout engines directly in the browser. To maintain interface responsiveness, it processes computationally expensive layout calculations within background worker threads and uses a standardized JSON format for layout serialization. The library provides tools for dynamic graph visualization and web-based diagramming, enabling the generation of network diagrams and flowcharts from structured text. It also includes a DOT language parser and supports syntax highlighting for scripts written in the DOT language. ## Tags ### Business & Productivity Software - [Graphviz-Based Graph Renderers](https://awesome-repositories.com/f/business-productivity-software/knowledge-management-systems/community-knowledge-bases/knowledge-base-visualizers/graph-visualizers/graphviz-based-graph-renderers.md) — Converts Graphviz DOT language descriptions into interactive SVG diagrams directly in web pages without server-side processing. - [WebAssembly Ports](https://awesome-repositories.com/f/business-productivity-software/knowledge-management-systems/community-knowledge-bases/knowledge-base-visualizers/graph-visualizers/graphviz-based-graph-renderers/webassembly-ports.md) — Runs the native Graphviz C library compiled to WebAssembly for browser-based graph layout computation. - [Graphviz Layout Engines](https://awesome-repositories.com/f/business-productivity-software/knowledge-management-systems/community-knowledge-bases/knowledge-base-visualizers/graph-visualizers/graphviz-based-graph-renderers/webassembly-ports/graphviz-layout-engines.md) — Executes Graphviz layout engines directly in the browser via WebAssembly for serverless graph rendering. - [JavaScript Object Graph Renderers](https://awesome-repositories.com/f/business-productivity-software/knowledge-management-systems/community-knowledge-bases/knowledge-base-visualizers/graph-visualizers/graphviz-based-graph-renderers/javascript-object-graph-renderers.md) — Ships a rendering pipeline that accepts graph definitions as JavaScript objects instead of DOT syntax. ([source](https://viz-js.com/api/)) ### Part of an Awesome List - [Browser-Based Diagramming Tools](https://awesome-repositories.com/f/awesome-lists/devtools/visualization-and-diagrams/browser-based-diagramming-tools.md) — Renders network diagrams and flowcharts from structured text within web browser environments. ### Data & Databases - [SVG Diagramming Libraries](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/svg-diagramming-libraries.md) — Produces SVG output from DOT language input for embedding diagrams in web applications. - [Graph String Output Renderers](https://awesome-repositories.com/f/data-databases/data-serialization-formats/data-formats/output-format-rendering/graph-string-output-renderers.md) — Returns rendered diagrams as plain text strings in the requested output format. ([source](https://viz-js.com/api/)) - [Graph JSON Serializers](https://awesome-repositories.com/f/data-databases/data-visualization-charts/json-data-chart-renderers/graph-json-serializers.md) — Outputs graph layout data as structured JSON objects for use in other programs or scripts. ([source](https://viz-js.com/api/)) - [Graph Layout Configurators](https://awesome-repositories.com/f/data-databases/graph-layout-engines/graph-layout-configurators.md) — Allows configuration of layout engine, output format, and default attributes for graph elements before rendering. ([source](https://viz-js.com/api/)) - [Graph Render Configurators](https://awesome-repositories.com/f/data-databases/graph-layout-engines/graph-render-configurators.md) — Configures layout engine, output format, y-coordinate inversion, graph reduction, and default attributes for rendering. ([source](https://viz-js.com/api/)) - [JavaScript Object Graph Definitions](https://awesome-repositories.com/f/data-databases/graph-object-instantiation/javascript-object-graph-definitions.md) — Provides a JavaScript object API for defining graph structures as an alternative to DOT syntax. ### Software Engineering & Architecture - [DOT Language Parsers](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures/domain-specific/language-support-definitions/language-parsing-rules/dot-language-parsers.md) — Parses Graphviz DOT language scripts and provides syntax highlighting for graph definitions. - [DOT](https://awesome-repositories.com/f/software-engineering-architecture/syntax-parsing-engines/language-parsers/dot.md) — Parses Graphviz DOT language scripts and provides syntax highlighting for graph definitions. - [JavaScript Object Graph Definitions](https://awesome-repositories.com/f/software-engineering-architecture/graph-construction-frameworks/javascript-object-graph-definitions.md) — Provides a programmatic JavaScript object API for constructing graph definitions without writing DOT syntax. ([source](https://viz-js.com/api/)) ### User Interface & Experience - [Graph SVG DOM Generators](https://awesome-repositories.com/f/user-interface-experience/svg-dom-integration/graph-svg-dom-generators.md) — Generates SVG elements directly in the browser DOM from computed graph layout data. ### Web Development - [Live SVG DOM Renderers](https://awesome-repositories.com/f/web-development/server-side-rendering/svg-renderers/live-svg-dom-renderers.md) — Returns rendered diagrams as live SVG DOM elements for direct insertion into web pages. ([source](https://viz-js.com/api/)) ### Graphics & Multimedia - [Multi-Format Output Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/multi-format-output-renderers.md) — Produces the same graph in multiple output formats from a single rendering call. ([source](https://viz-js.com/api/)) - [Graph JSON Output Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/multi-format-output-renderers/structured-result-renderers/graph-json-output-renderers.md) — Returns rendered graph diagrams as structured JSON objects for programmatic access. ([source](https://viz-js.com/api/))