# Documentation Diagram Design Guide **URL:** \ **Category:** Design\ **Created:** [March 22, 2013, 6:16pm UTC](https://discuss.emberjs.com/t/documentation-diagram-design-guide/696 "2013-03-22T18:16:55Z")\ **Posts on this page:** 10\ **Page:** 2
**Author:** ![endash](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/endash/32/9646_2.png) [@endash](https://discuss.emberjs.com/u/endash)\ **Post date:** [March 27, 2013, 6:36pm UTC](https://discuss.emberjs.com/t/documentation-diagram-design-guide/696/21 "2013-03-27T18:36:15Z")
Here is my meager contribution. I’m going to assume I _also_ don’t have permissions to post an image (update: or even a link to one, apparently) since i just registered, but here’s a link! Click on the image for full size. > **[read error: Photo](https://endash.tumblr.com/image/46437034248)** > > Sproutcore & other web design & development by Christopher Swasey, in Burlington, VT. Whipping together a legend graphic, but the idea is: (1) ember orange → state, (2) light ember orange → api hook/callback (3) grey → function (4) arrow leading into a box is a function call, leading out from a state is a transition… etc etc. Minimalism and blending in with the existing ember design language are the main drivers, here. I also modified the graphic slightly for clarity. ---
**Author:** ![sambeau](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/sambeau/32/3952_2.png) [@sambeau](https://discuss.emberjs.com/u/sambeau)\ **Post date:** [March 27, 2013, 10:28pm UTC](https://discuss.emberjs.com/t/documentation-diagram-design-guide/696/22 "2013-03-27T22:28:29Z")
There’s some lovely ideas in all of these. Two points: - If a highly ‘designed’ scheme is chosen it would be best if it fitted closely with the current web design (unless a re-design is in the near future). - If a different scheme is preferable then something generic that could survive a website redesign and the porting to other media (print/presentation etc) could be worth pursuing I went for the former but am willing to be convinced that the latter could be just as important. ---
**Author:** ![jvenator](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jvenator/32/4035_2.png) [@jvenator](https://discuss.emberjs.com/u/jvenator)\ **Post date:** [March 27, 2013, 11:32pm UTC](https://discuss.emberjs.com/t/documentation-diagram-design-guide/696/23 "2013-03-27T23:32:30Z")
Aside from the possible issues for the color-blind, I like the yes/no action icons at the base of the arrows. It feels cleaner and limits the amount of space taken up by the transition arrows the action responses. ---
**Author:** ![jvenator](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jvenator/32/4035_2.png) [@jvenator](https://discuss.emberjs.com/u/jvenator)\ **Post date:** [March 27, 2013, 11:35pm UTC](https://discuss.emberjs.com/t/documentation-diagram-design-guide/696/24 "2013-03-27T23:35:31Z")
I like your intention here, but am on the fence overall. I think the text within the boxes is too small from a readability standpoint. ---
**Author:** ![machty](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/machty/32/13933_2.png) [@machty](https://discuss.emberjs.com/u/machty)\ **Post date:** [March 28, 2013, 9:28am UTC](https://discuss.emberjs.com/t/documentation-diagram-design-guide/696/25 "2013-03-28T09:28:18Z")
@endash I like the color scheme and the minimalism, but the arrows seem inconsistent in a way that doesn’t intuit their meaning. I do think some minimalist text outlining the logic of each transition would be good, but overall I think I like your design the best. Whatever we settle on, it should probably be very similar to how we might present the run loop, if such documentation is desirable. Would love to blast through that diagram with someone. ---
**Author:** ![sambeau](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/sambeau/32/3952_2.png) [@sambeau](https://discuss.emberjs.com/u/sambeau)\ **Post date:** [March 28, 2013, 10:29am UTC](https://discuss.emberjs.com/t/documentation-diagram-design-guide/696/26 "2013-03-28T10:29:04Z")
I like that you’ve used the page background as the diagram background and the overall colour scheme. ---
**Author:** ![sambeau](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/sambeau/32/3952_2.png) [@sambeau](https://discuss.emberjs.com/u/sambeau)\ **Post date:** [March 28, 2013, 11:05am UTC](https://discuss.emberjs.com/t/documentation-diagram-design-guide/696/27 "2013-03-28T11:05:41Z")
I like @endash’s plain background without frame. So I had a go… and here’s a version with less colour… ---
**Author:** ![Rudi](https://avatars.discourse-cdn.com/v4/letter/r/50afbb/32.png) [@Rudi](https://discuss.emberjs.com/u/Rudi)\ **Post date:** [March 28, 2013, 11:23am UTC](https://discuss.emberjs.com/t/documentation-diagram-design-guide/696/28 "2013-03-28T11:23:27Z")
I realy like the colourfull version. Well done! ---
**Author:** ![cjeria](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/cjeria/32/4029_2.png) [@cjeria](https://discuss.emberjs.com/u/cjeria)\ **Post date:** [March 28, 2013, 6:21pm UTC](https://discuss.emberjs.com/t/documentation-diagram-design-guide/696/29 "2013-03-28T18:21:02Z")
Here’s another visual style to add to the mix. Added a little dimension here. [http://uibucks.tumblr.com/image/46520435462](http://uibucks.tumblr.com/image/46520435462) I like @endash option simplicity and @sambeau colorful option. ---
**Author:** ![atc](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/atc/32/4037_2.png) [@atc](https://discuss.emberjs.com/u/atc)\ **Post date:** [March 30, 2013, 5:38pm UTC](https://discuss.emberjs.com/t/documentation-diagram-design-guide/696/30 "2013-03-30T17:38:47Z")
I gave the “Lifecycle of an Ember View” diagram a quick pass with a similar aesthetic as the current Ember design (I definitely agree the design should either be extremely generic, or closely fit the current Ember site aesthetic). This is really simple for now (and definitely lacking some contrast I think), and I’m not sure if this diagram really is the best example for presentation of this styling… will probably update/try another diagram when I have some more time. [Previous page](https://discuss.emberjs.com/t/documentation-diagram-design-guide/696.md?page=1)