draw.io : The Best Free Flowchart Software

draw.io

Draw.io

Three to six months ago I found the flowchart software called draw.io. I have lauded it for it’s easy drag / drop behavior for generating rich flowcharts, schemes, and UI mocks. The application is designed to sync to a Google Drive (google doc api) account and offers all the fun sharing & collaboration features that I have come to expect from a cloud application. I have not had the opportunity to try out the Jira or Confluence integration yet–so I cannot give any advice or review there.

MVC Architecture

MVC Architecture

Diagrams generated can be exported in a variety of image formats (JPG, PNG, etc), SVG, XML and PDF (which I haven’t tried or found a use for yet), or HTML–which generates a static webpage that can be used on desktop browsers (see the following examples):

sample flowchart

sample flowchart

Sample Diagram

Sample Diagram

MCFTB - Play Strategy

MCFTB – Play Strategy

I love this tool.

Bookmark and Share

HTML / CSS References to Keep On Hand

HTML5 Doctor’s HTML5 Element Flowchart:

http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf

A visual flowchart to answer the ongoing question, “which HTML tag should wrap this content?” These simple rules will help keep code clean and easy to extend and digest by browsers and bots.

http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf

Learnlayout.com: Learn CSS Layout tutorial:

http://learnlayout.com/

This 19 part in-browser tutorial explains in depth the core CSS principals any web developer will need to grasp. Visual examples for each property help paint a rich picture and establish a strong foundation for styling page layout.

http://learnlayout.com/

W3Schools

Screen Shot 2016-04-27 at 9.10.48 AM

W3Schools has always been an excellent source of information across the board. From my early days learning PHP and Javascript in 2008 up through the present day, it is the most reliable and constant source of documentation I have found for all things pertaining to web development.

http://www.w3schools.com/html/default.asp

Bookmark and Share