https://github.com/lyubo-slavilov/drawdown-svg-render

https://github.com/lyubo-slavilov/drawdown-svg-render

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/lyubo-slavilov/drawdown-svg-render
• Owner: lyubo-slavilov
• Created: 2019-01-18T11:39:02.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T12:57:06.000Z (about 2 years ago)
• Last Synced: 2024-09-22T03:39:52.929Z (4 months ago)
• Language: JavaScript
• Size: 190 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-starred - lyubo-slavilov/drawdown-svg-render - (others)

README

        
# Drawdown Svg Render

D3 based renderer which renders [parsed drawdown][30d96062] diagrams.

  [30d96062]: https://github.com/lyubo-slavilov/drawdown-parser "drawdown-parser"

## Installation

```bash

$ npm install drawdown-svg-render --save

```

## Usage

In order to use the renderer we need to parse our drawdown script into an object representation. We can achieve this by using the [drawdown parser][30d96062] package

```bash

$ npm install drawdown-parser

```

Once we have all dependencies installed, we can do:

```javascript

import { factory } from 'drawdown-parser';

import { Renderer } from 'drawdown-svg-render';

let script = `- Hello.

- Do you like diagrams?

- Yes:

  - You are cool.

- No:

  - You need some coffee.`

let diagramObject = factory('flow').parseText(script);

let renderer = new Renderer();

renderer.render(document.body, diagramObject);

```

This will render interactive SVG diagram editor into the `body` of our HTML document. The editor will contain a diagram which will look something like this:

![Example diagram](assets/example-flow-diagram.png)

The editor will let us pan and zoom the diagram, move the nodes around and define the style of the arrows.

The actual look of the diagram will depend highly on our CSS rules. The `Renderer` itself does not provide any styling.

## API

Sorry. It is in TODO.

## Demo

Sorry. It is in TODO also.