Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://awslabs.github.io/diagram-maker/

A library to display an interactive editor for any graph-like data.
https://awslabs.github.io/diagram-maker/

aws canvas cloud diagram diagram-editor diagram-maker diagrams drag drop editor flowchart graph interactive interactive-demos state-machine visualization workflow

Last synced: 1 day ago
JSON representation

A library to display an interactive editor for any graph-like data.

Host: GitHub
URL: https://awslabs.github.io/diagram-maker/
Owner: awslabs
License: apache-2.0
Archived: true
Created: 2020-08-31T19:30:19.000Z (about 4 years ago)
Default Branch: master
Last Pushed: 2023-04-26T19:24:44.000Z (over 1 year ago)
Last Synced: 2024-05-21T12:47:09.874Z (6 months ago)
Topics: aws, canvas, cloud, diagram, diagram-editor, diagram-maker, diagrams, drag, drop, editor, flowchart, graph, interactive, interactive-demos, state-machine, visualization, workflow
Language: TypeScript
Homepage: https://awslabs.github.io/diagram-maker
Size: 8.22 MB
Stars: 2,388
Watchers: 50
Forks: 135
Open Issues: 2
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome-node-based-uis - diagram-maker - Interactive editor for any graph-like data (Javascript Libraries / Renderers)

README

        # Diagram Maker

[![Build Status](https://travis-ci.com/awslabs/diagram-maker.svg?branch=master)](https://travis-ci.com/awslabs/diagram-maker)

[![NPM Version](https://img.shields.io/npm/v/diagram-maker)](https://npmjs.org/package/diagram-maker)

[![License](https://img.shields.io/npm/l/diagram-maker)](https://github.com/awslabs/diagram-maker/blob/master/LICENSE)

[![Bundle Size](https://img.shields.io/bundlephobia/minzip/diagram-maker)](https://bundlephobia.com/result?p=diagram-maker)

[![Downloads](https://img.shields.io/npm/dw/diagram-maker)](https://npmjs.org/package/diagram-maker)

[![Github Stars](https://img.shields.io/github/stars/awslabs/diagram-maker?style=social)](https://github.com/awslabs/diagram-maker)

[Diagram Maker](https://awslabs.github.io/diagram-maker) is a library to display an interactive editor for any graph-like data.

Following is a screenshot from one of the consumers of this library, [AWS IoT Events Console](https://console.aws.amazon.com/iotevents/home?region=us-east-1#/create/detectormodel) with Diagram Maker in action.

![IoT Events Screenshot](storybook/assets/IoTEventsScreenshot.png)

Following is a screenshot from another one of the consumers of this library, [AWS IoT Things Graph Console](https://console.aws.amazon.com/thingsgraph/home?region=us-east-1#/flows/create) with Diagram Maker in action.

![IoT Things Graph Screenshot](storybook/assets/IoTThingsGraphScreenshot.png)

## Why Diagram Maker?

Diagram Maker is a framework & data format agnostic library that is fully customizable in terms of look & feel as well as behavior. It also exposes a declarative interface to reduce the code required to integrate the library in any application and comes with many interactive features built in. Read more about the features of the library [here](https://awslabs.github.io/diagram-maker/?path=/story/docs-features--page).

## Explore

### Interactive Demo

Check out one of our interactive demos [here](https://awslabs.github.io/diagram-maker/?path=/story/demos-diagram-maker--left-right-rectangular) or see the full list of interactive demos [here](https://awslabs.github.io/diagram-maker/?path=/story/docs-explore-demos--page). The code for these demos can be found [here](https://github.com/awslabs/diagram-maker/tree/master/integ/demos.stories.ts).

### Plugins

Check out the plugins that can be used alongside the library for additional functionality [here](https://awslabs.github.io/diagram-maker/?path=/story/docs-explore-plugins--page).

### Showcase

Check out some of the consumers of this library [here](https://awslabs.github.io/diagram-maker/?path=/story/docs-explore-showcase--page).

## How do I use it?

### Installation

Check out our installation guide [here](https://awslabs.github.io/diagram-maker/?path=/story/docs-getting-started-installation--page).

### Usage

Check out our usage guide [here](https://awslabs.github.io/diagram-maker/?path=/story/docs-usage-initialization--page).

### Architecture

Read more about the architecture of diagram maker [here](https://awslabs.github.io/diagram-maker/?path=/story/docs-usage-architecture--page).

## Docs

Check out our full documentation [here](https://awslabs.github.io/diagram-maker).

## Typedoc generated documentation

Check out the [typedoc](http://typedoc.org/) generated documentation [here](https://awslabs.github.io/diagram-maker/typedoc/modules.html) to find out more information about any of our exported symbols.

## Security

See [CONTRIBUTING](CONTRIBUTING.md#security-issue-notifications) for more information.

## License

This project is licensed under the Apache-2.0 License.