Tiny Diagram is a light weight diagram editor written in JavaScript. The intent is for this
editor to be incorporated in technical blogs and wikis to create diagrams embedded in the page
as JSON and rendered dynamically. It is inspired by Tiny Editor
(Forked to Github here: https://github.com/jessegreathouse/TinyEditor).
The end goal is to have a free Open Source JavaScript plugin for creating diagrams like Dia or Visio or Gliffy but be
as light-weight as possible. Obviously it won't be as feature rich but hopefully it will be useful enough for
most applications.
Tiny Diagram provides both an editor and a renderer. The figure shown here is rendered dynamically
when the page is loaded. The JSON is shown in the text area below.
Play around with the editor below. Clicking the save button will update the JSON in the text area.
Click and drag a shape to move it around. Click and drag a vertex to resize. CTRL+click a vertex to
rotate the shape. Press the "Delete" key to delete the selected object.
{"diag":{"width":"400","height":"300","elements":[{"circle":{"center":{"vertex":{"point":{"x":59,"y":85}}},"radius":20,"lineWidth":1,"lineStyle":"solid","lineColor":"#000000","fillColor":"#ffffff","fontFace":"Ariel","fontHeight":20,"fontStyle":"normal","rotation":0}},{"text":{"center":{"x":134,"y":36},"text":"From A to B to C","lineWidth":1,"lineStyle":"solid","lineColor":"#000000","fillColor":"#000000","fontFace":"Ariel","fontHeight":16,"fontStyle":"normal","rotation":0}},{"circle":{"center":{"vertex":{"point":{"x":197,"y":87}}},"radius":20,"lineWidth":1,"lineStyle":"solid","lineColor":"#000000","fillColor":"#ffffff","fontFace":"Ariel","fontHeight":20,"fontStyle":"normal","rotation":0}},{"rectangle":{"vertices":[{"vertex":{"point":{"x":109,"y":126}}},{"vertex":{"point":{"x":109,"y":166}}},{"vertex":{"point":{"x":149,"y":166}}},{"vertex":{"point":{"x":149,"y":126}}}],"lineWidth":1,"lineStyle":"solid","lineColor":"#000000","fillColor":"#ffffff","fontFace":"Ariel","fontHeight":20,"fontStyle":"normal","rotation":-311.37717010349184}},{"text":{"center":{"x":199,"y":84},"text":"B","lineWidth":1,"lineStyle":"solid","lineColor":"#000000","fillColor":"#000000","fontFace":"Ariel","fontHeight":20,"fontStyle":"normal","rotation":0}},{"text":{"center":{"x":130,"y":145},"text":"C","lineWidth":1,"lineStyle":"solid","lineColor":"#000000","fillColor":"#000000","fontFace":"Ariel","fontHeight":20,"fontStyle":"normal","rotation":0}},{"text":{"center":{"x":59,"y":83},"text":"A","lineWidth":1,"lineStyle":"solid","lineColor":"#000000","fillColor":"#000000","fontFace":"Ariel","fontHeight":20,"fontStyle":"normal","rotation":0}},{"line":{"vertices":[{"vertex":{"point":{"x":82,"y":85}}},{"vertex":{"point":{"x":176,"y":85}}}],"lineWidth":1,"lineStyle":"solid","lineColor":"#000000","fillColor":"#ffffff","fontFace":"Ariel","fontHeight":20,"fontStyle":"normal","rotation":0}},{"line":{"vertices":[{"vertex":{"point":{"x":185,"y":104}}},{"vertex":{"point":{"x":148,"y":134}}}],"lineWidth":1,"lineStyle":"solid","lineColor":"#000000","fillColor":"#ffffff","fontFace":"Ariel","fontHeight":20,"fontStyle":"normal","rotation":0}}]}}
This is a preview for now. I have a few more updates to add but it will take some time before it's complete
since I'm doing this in my spare time. Some features I'd like in order of priority: