Try Online

Try online diagramatics_logo

Diagramatics Online Editor

Or use online code playgrounds

Edit in JSFiddle jsitor_logo

Edit in JSitor

Install

CDN

The simplest way of using Diagramatics is to import it from a CDN.

javascript :

https://cdn.jsdelivr.net/npm/diagramatics@1.5/dist/diagramatics.js

javascript (min) :

https://cdn.jsdelivr.net/npm/diagramatics@1.5/dist/diagramatics.min.js

css :

https://cdn.jsdelivr.net/npm/diagramatics@1.5/css/diagramatics.css

*you can change "1.x.x" into the version you want to use, or use "latest" to always use the latest version.
*css is only required to style the interactive controls.

The default font used in Diagramatics is Latin Modern Math. You can link it from CDN, download it, or any other way you want.

font :

https://fonts.cdnfonts.com/css/latin-modern-math

The minimal example below shows how to draw a red square on an SVG element.

index.html


<!DOCTYPE html>
<html>
    <body>
        <svg id="mysvg"></svg>
    </body>
    <script type="module">
        import {square, draw_to_svg} from 'https://cdn.jsdelivr.net/npm/diagramatics@1.5/dist/diagramatics.min.js'
        let mysvg = document.getElementById('mysvg');
        let sq = square(10).fill('red');
        draw_to_svg(mysvg, sq);
    </script>
</html>

Package Manager

You can also download it from npm using the package manager of your choice.


$ npm install diagramatics

After installing, you can import it into your project.

index.html


<!DOCTYPE html>
<html>
    <body>
        <svg id="mysvg"></svg>
    </body>
    <script type="module">
        import {square, draw_to_svg} from 'diagramatics'
        let mysvg = document.getElementById('mysvg');
        let sq = square(10).fill('red');
        draw_to_svg(mysvg, sq);
    </script>
</html>

Usage

Minimal example

All you need to have in your html file is an svg element to draw the diagram.
If you want to add interactive controls, you also need a div element to hold the controls and a link to the css.

index.html


<!DOCTYPE html>
<html>
    <head>
        <!-- css for 'Latin Modern Math' font -->
        <link href="https://fonts.cdnfonts.com/css/latin-modern-math" rel="stylesheet">
        <!-- optional css for interactive controls -->
        <link href="diagramatics/css/diagramatics.css" rel="stylesheet">
    </head>
    <body>
        <!-- svg component to draw the diagram -->
        <svg id="mysvg"></svg>

        <!-- optional div to hold interactive controls -->
        <div id="controldiv"></div>
    </body>
    <script src="index.js" type="module"></script>
</html>

Minimal example for the index.js file.

index.js


// import the necessary functions from the library
import {square, draw_to_svg} from 'diagramatics'

// get the svg element
let mysvg = document.getElementById('mysvg');

// build the diagram
let sq = square(10).fill('red');

// draw the diagram to `mysvg`
draw_to_svg(mysvg, sq);

draw function

draw_to_svg() only accept a single diagram object to draw. To draw multiple diagram objects, use diagram_combine() to combine them into a single diagram object.
To make it simpler, we can also define a function to draw the diagram.

index.js


// import the necessary functions from the library
import {square, draw_to_svg, diagram_combine} from 'diagramatics'

// get the svg element
let mysvg = document.getElementById('mysvg');

// define the `draw` function
let draw = (...diagrams) => {
    draw_to_svg(mysvg, diagram_combine(...diagrams));
};

// build the diagram objects
let sq = square(10).fill();
let sq2 = square(2).fill('red')

// draw the diagram to `mysvg`
draw(sq, sq2);

Add interactivity

index.js


// import the necessary functions from the library
import {square, draw_to_svg, diagram_combine, V2, Interactive} from 'diagramatics'

// get the svg and control element
let mysvg = document.getElementById('mysvg');
let controldiv = document.getElementById('controldiv');

// define the `draw` function
let draw = (...diagrams) => {
    draw_to_svg(mysvg, diagram_combine(...diagrams));
};
// create the interactive object
let int = new Interactive(controldiv, mysvg);

// build the diagram objects
int.draw_function = (inp) => {
    let x = inp['x'];
    let big_sq   = square(10).fill();
    let small_sq = square(2).fill('red').translate(V2(x,0));

    draw(big_sq, small_sq);
}

int.slider('x', -10, 10, 0);
int.draw();

Importing

You can use the import statement to import the necessary functions from the library one by one.

index.js


import {square, circle, V2} from 'diagramatics'

let sq   = square(10).fill();
let circ = circle(2).fill('red').translate(V2(5,0));

You can also import everything from the library using the * wildcard and give it an alias.

index.js


import * as dg from 'diagramatics'

let sq   = dg.square(10).fill();
let circ = dg.circle(2).fill('red').translate(dg.V2(5,0));

Or, if you're feeling frisky, you can import everything and put it in the global namespace.

index.js


import * as dg from 'diagramatics'
Object.entries(dg).forEach(([name, exported]) => window[name] = exported);

let sq   = square(10).fill();
let circ = circle(2).fill('red').translate(V2(5,0));

Downloading the Diagram

You can download the diagram as an svg or png file using the download_svg_as_svg() and download_svg_as_png() functions respectively.

The size of the image will follow the size of the svg element in the html file.

download_svg_as_svg ( outer_svgelement : SVGSVGElement )

download_svg_as_png ( outer_svgelement : SVGSVGElement )