Skip to content

 

Creating a library of vector shapes, Part I

As most SimpleDiagrams users know, it’s pretty easy to create a library of custom shapes. You just fire up SimpleDiagrams, select “New Custom Library” from the “Libraries” menu, and then start dragging bitmap images onto your new library (visible on the left side of the screen in the libraries panel).

However, some of you have noticed that most of the libraries that come with SimpleDiagrams are *not* bitmap images, but rather vector shapes.

What’s the difference? Well, since vectors are described by numbers rather than pixels, the shape remains smooth no matter how big or small you make it. You’ll immediately notice the difference when you resize a shape. If the shape is a bitmap it will start to look a bit jagged when you resize it ¬†(unless the bitmap is a really high resolution when you start). Vectors always look smooth.

So of course I’ve been receiving emails from customers asking “how can I create a plugin library with the smooth shapes like the ones you can download from the libraries page?”

Well, you can create nice vector libraries just like the official ones…you just need to do a little work. In this post I’ll explain how to create a vector shape and use it to build a new library. Then in the next post I’ll show you how to create a special type of shape that will allow you to change the shape’s line width when you use it in SimpleDiagrams.

Getting Started.

Here’s what you’ll need to create your very own vector-shape library:

  • A drawing program that exports images in the .swf format. I recommend Adobe Illustrator or Adobe Flash Professional. (We’ll use Adobe Illustrator in this example)
  • A text editor you can use to create a simple xml document

That’s all you need. There may be other programs that allow you to save drawings as .swfs but we’ll stick with Illustrator for now.

Getting Creative.

Step 1: Draw Something

Ok, the first thing you must do is draw something. Anything. Here’s my drawing in Illustrator…

 

Notice that I sized the artboard to be just about the size of my drawing. That will be important later on when we load the image in SimpleDiagrams.

If you’re doing a basic line drawing (and you don’t have to, you can essentially create anything you want), you should set your lines to white so that they show up on the dark background of the library panel in SimpleDiagrams. You can always change the shape color when drag the shape onto SimpleDiagrams drawing board.

Here I’ve changed the lines to white:

 

Step 2: Export Drawing

Now, you export your drawing as a .swf file. Select File > Export from the illustrator menu and make sure to select “SWF” in the options pulldown.

 

When you click “Export” you’ll assign the properties of the swf. Select the following properties:

Click OK and save the swf to a temporary folder on your desktop somewhere.

Ok, that’s half the battle. You’ve created a drawing and turned it into a “swf” file that SimpleDiagrams can understand. Now you just need to create a library file to hold it.

SimpleDiagrams uses the .sdlp extension for library files (“simplediagrams library plugin”). An .sdlp file is really just a .zip file that contains an xml document that describes the library shapes and a swf file for each shape, if needed.

In our case, we only have one shape, so our .sdlp will be a .zip file with one xml document and one swf file (the happy business man we just created). So let’s create the .sdlp

Getting Technical.

Now you’re ready to take the swf you just made and create an actual .sdlp plugin.

Step 3: Create the xml file

The xml file that describes a library is pretty basic. It provides just a bit of information about the library in general, and then just lists each shape in the library. Here’s the xml file I’ve created to represent my new library.

A few things to notice:

  • The “name” attribute in the <library/> element should be a unique name that won’t conflict with other libraries. Using a reverse domain name is a good way to do this. I name my libraries¬†com.simplediagrams.shapeLibrary.[some name]. But really you can put anything here.
  • The “displayName” attribute for both the library and the shape is the name that SimpleDiagrams displays to the user when diagramming.
  • The <custom/> element value should be set to “false” , since “custom” libraries are for bitmap shapes. We’re creating a vector library
  • The <items/> element can hold as many <swfShape/> elements as you want. Here we’re just including one shape in our library
  • A “thumbnail” is an small version of the shape that appears in the library panel. If you want you can create a separate swf for the thumbnail if you want. This is sometimes helpful if your shape is complex and you want a simple version of it that looks good when really small. In this case, we’ll just use the same swf as the thumbnail.

Ok, now save this file as “library.xml” into the same temporary folder you saved your “business_man.swf”. You should now have a folder that looks like this:

Step 4: Create the .sdlp

This is the easy part. An .sdlp file is just a .zip file with the extension changed. So select the two files and create a .zip file and then change the name to .sdlp

BIG WARNING MESSAGE STARTING NOW….

BIG WARNING #1: You want to create the zip file directly with two files in it. Don’t create a .zip of the folder that holds the two files. If you do, SimpleDiagrams won’t be able to open the .sdlp.

BIG WARNING #2: If you’re using OSX, you probably know that to create a zip you have to use the “compress” right click menu option. However, you might not know that OSX throws a bunch of meta data junk into that archive when compressing it. This is not good. The metadata junk causes issues for SimpleDiagrams. So, you need a way to create a “clean” .zip file with no junk. This post helped me understand how to do this:

http://mac.elated.com/2007/03/12/creating-clean-archive-files/

After you’ve created your .zip (or “archive” on OSX), just change the extension to .sdlp and YOU’RE READY TO ROCK, BABY! Just double-click the file and it should automatically open your SimpleDiagrams app and load the file.

Let me know how your library building adventures go.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

0 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.



Some HTML is OK

(required)

(required, but never shared)

or, reply to this post via trackback.