TODO.md

TODO

The goal is to have a consistent look for all of the diagrams and make a good suite of diagramming tool for improved documentation.

• Improve contributor experience
• Make mocha test run debuggable
• Add support for backgrounds for edge labels so they can be styled better. Without a background box to work with it's hard to make them readable on top of edges and such. See:
  • http://stackoverflow.com/a/16873128
• Bin packing?
  • https://github.com/Jack000/SVGnest
• Add theming support
• High level Goals
  • Create a rich suite of diagram generators
  • Should we add versioning?
  • Be able to generate .svg, .png, .pdf (in that order)
  • Be designed to easily make a command line tool, a node.js module, a browser module, and online converter, and an atom plugin
  • Make it very consistent
    • Make it so you can have styling that you provide to each generator to create simular styled graphs
    • Make it so that sub command/function is also the file extension for source files (helpful in atom and in general)
    • If possible make documentation consistent
      • For example extra graphviz's pdf (see the bottom for visual tables that are great)
      • Or man dot
  • TODO: Write an article explaining all the point points I've faced which would go away if people only outputted SVG that could then be turned into content or converted to an image.
• prio art (Focus is on open source):
  • Daegre Design Priorities:
    • I like this one, it's renderer agnostic
    • https://github.com/cpettitt/dagre/wiki#recommended-reading
    • https://github.com/cpettitt/dagre/wiki#design-priorities
    • See https://github.com/cpettitt/dagre/wiki#third-party-examples
      • This one especially allows UML style from simple syntax layouts
        • http://www.nomnoml.com/
        • Click 'I'
  • cytoscape
    • http://js.cytoscape.org/
• Add graphviz functionality
  • See Gallery
  • Create a graphviz-prebuilt or dot-prebuilt and go from there
  • Docs
    • Dot Language
    • Node Shapes
    • Node, Edge, and Graph Attributes
    • Arrow Shapes
    • Colors
  • Alternative Approach
    • https://github.com/mdaines/viz.js/
  • dot: filter for drawing directed graphs (Docs)
    • started
  • add more layout engines
    • circo: filter for circular layout of graphs (Docs)
    • fdp: filter for drawing undirected graphs (Docs)
    • neato: filter for drawing undirected graphs (Docs)
    • osage: filter for array-based layouts (Docs)
    • twopi: filter for radial layouts of graphs (Docs)
• A timeline labeling
  • https://twitter.github.io/labella.js/
• Add Dependency graph support
  • Would be nice to see it in a stack format
• Add Orgchart support?
• Add Flowchart Support
  • Wikipedia Definition
  • Prio art
    • flowchart.js
      • • Uses Raphael...
    • Support compound states, as in this demo?
• Generalized D3
  • Example: https://github.com/gregjopa/d3-server-side-demo
  • TODO: Find articles
  • Have system for running arbitrary code?
• BNF, EBNF, and/or ABNF?
  • https://github.com/hildjj/node-abnf
• Add Dependencies Diagram Support?
  • Prio art
    • http://blakehaswell.com/post/85244164767/visualise-your-javascript-dependency-graph-using
• cytoscape looks great in general.
• Expose and document non cli way of generating the diagrams
• Consider standardizing the input text formats for all diagram types(debatable as custom syntaxes are nice, albeit messier to manipulate/generate procedurally)
• similar projects
  • https://github.com/knsv/mermaid (VERY GOOD, and it's been around for quite a while)
• Consider adding file extensions for each that match their sub command
  • diagrams railroad -> file.railroad
  • diagrams sequence -> file.sequence
  • diagrams flowchart -> file.flowchart
• Consider supporting generating plain old images
  • Todo figure out the optimal way to go from svg to image pixels
• Design improvements
  • Drop shadows?
  • Gradients?
  • Steal designs from the best. I love the look of Omnigraffle when I used it. What's better?
• Make an atom plugin
  • support svg too for convenience

Extend Project Goals and Philosophies

Creating yet another visualization lib seems cliche, personally I feel like there are some very technical impressive libs out there but I'd like to create a well documented alternative with a strict focus on statically generated diagrams that are very consistently designed and easy to embed in documentation and should be mobile/responsive first. It's to be seen if I can improve on the status quo.