chachasikes's sandbox: Visual Documents for Drupal

What is this?

A Drupal project that is a repository for visual documents explaining Drupal processes, components, systems and other useful visual elements.

We are creating SVG images so that they can be versioned with Git. SVG is an XML-based file format, and the text in the document can be searchable. Storing the graphics in a git repository can make it easier to translate the graphics into other languages, as well as to log changes to graphics.

Process

1. Create diagram.
2. Add some data to the diagram to allow for tracking back to image source. For example, you might want to add a link to the git repository, a publicly editable google drawing, a link to the node to which the image applies. Credits for the contributors.
3. Consider that diagrams might need to be translated into other languages.
4. Export to SVG.
5. Name the filename descriptively.
6. If appropriate, add the node id (and comment number if appropriate) to the filename.

{nid}_{descriptive_filename}.svg

For example: 1011698_DrupalCodeReviewProcessforApplicants.svg
This would track back to http://drupal.org/node/1011698

Store graphics

Option 1 (under consideration)

1. Create sandbox for your account
2. Create a new project "Drupal Project."
3. Follow Git instructions to set up your git repository.
4. Create a folder if you are making images for a certain project. Include node id in folder name if applicable.
5. Add your graphic to your folder. Add png or jpeg or gif files if you have trouble viewing svg images and just want a quick screenshot.
6. Commit your graphic. You might want to include a note about which node you were creating a graphic for in the commit message.

Option 2 (under consideration)
Submit patches to this project.

Share your graphic

• Send SVG as a file to someone on documentation team who has permissions to add graphics on whatever page needs images, or attach the SVG image to a comment.
• Give git repository location to documentation author. They can clone your branch if it turns out that you have a lot of graphics that you are creating.

Get an image from a Drupal Git project repository

1. Visit the drupalcode.org sandbox git repository viewer.
   Project page > Developer > Repository Viewer

   For example, for this project, the page would go to:
   http://drupalcode.org/sandbox/chachasikes/1154918.git

2. Look at the 'tree' view.
   http://drupalcode.org/sandbox/chachasikes/1154918.git/tree
3. Download the link to the 'blob' of your image. ('Save Link As' on the "blob" item.)

   Examples of a links:

   http://drupalcode.org/sandbox/chachasikes/1154918.git/blob/HEAD:/1011698...

   http://drupalcode.org/sandbox/chachasikes/1154918.git/blob/HEAD:/1011698...

Tools for creating diagrams

Google Drawing

Google Drawing provides an collaborative tool for editing diagrams. Images can be exported to SVG.

Adobe Illustrator

Many designers already have Adobe products. Illustator does generate SVG files.

Inkscape

Inkscape is a vector-editing program that can export SVG graphics

Omnigraffle

For Mac. The Pro edition exports SVG

Gliffy

Gliffy is a web-browser based diagramming tool. Exports to SVG.

Aviary Raven

A collaborative browser based vector editing tool.

Background

http://chicago2011.drupal.org/conference/bof/visual-multimedia-documenta...
[@TODO Add list of other tools generated at BoF session]
[@TODO Add links to existing discussions about SVG for Drupal]