TLDR: Use StackEdit to Create Logic Flow Maps in Markdown

I recently came across a great Markdown editor from the Stack Exchange team called StackEdit.

It’s essentially “just” a Chrome app that converts your Markdown to HTML in real time where you can see it happen (it can also convert your HTML into Markdown… cause I guess that happens?). It brings the great Markdown WYSIWYG from the Stack Exchange sites that can accommodate math and code and incorporates a few extra features, like side scrolling in both panes, creating table of contents for larger posts, and sharing to GitHub and syncing to Dropbox or Google Drive. It also claims to allow you to publish to WordPress, Tumbler, and Blogger, but I had some trouble hooking up my WordPress site despite having that appropriate Jetpack features enabled.

On top of all those bells and whistles, though, StackEdit offers a Markdown syntax for UML diagrams. While I find a lot of the features coming out of StackEdit to be pretty nifty for web writing, I have to admit that the diagram building is an interesting step forward for Markdown. It ties into Raphael.js, making it fairly customizable, and despite leaving a few things desired, the syntax is pretty easy to pick up. And, for what it’s worth – to be able to write a few lines of code in under 30 minutes rather than messing with a large library or a UI builder, I expect StackEdit will be coming up as as regular tool for creating logic flow maps on several projects to come.

As a brief demo, here is the Markdown to create the sample logic flow for a successful leg of a fully built project described in this post.

flow
st=>start: Spreadsheets
e=>end: Most rows contain data that match models
55% Confidence
op1=>operation: Product A
sub1=>subroutine: Not Mapped
0% Confidence
cond=>condition: Mapped
or Not Mapped?
c2=>condition: >50% of Columns Mapped
or <50% of Columns Mapped sub2=>subroutine: <50% of Columns Mapped 15% Confidence c3=>condition: Mapping by Index
or Mapping by Non-Index
sub3=>subroutine: Mapping by Non-Index
25% Confidence
c4=>condition: Most rows contain data that match models
or Data fails models more than not
sub4=>subroutine: Data fails models more than not
5% Confidence

st->op1->cond(yes)->c2(yes)->c3(yes)->c4(yes)->e
cond(no)->sub1(right)
c2(no)->sub2(left)
c3(no)->sub3(left)
c4(no)->sub4(left)

It ends up creating this

That is with no styling or edits, so it ends up being a bit large and burly. It is, however, a clear flow map that helps to display the desired logic routine for the application, marking the decision nodes.

All in all, a nice visualization tool with a pretty low learning curve. What more could the time-crunched developer ask for?