Try it now - it's free!<< See all posts

Embedding images and diagrams in Github wiki pages and issue tracker

This post gives you a guideline on how to embed images, commented images and diagrams into Github issues and wiki pages. Jump to the visual guideline at the bottom of the page for a quick howto.

Introduction

I really enjoy using Github. Next to versioning your code in the cloud, it also gives you Wiki pages and a simple yet very intuitive issue tracking system. The nice thing about all that is that you have everyhing in one place, all your documentation, bug reports together with your code. Giving access to new team members is then easy as you can just add them to your project as collaborators and they are ready-to-go with one single account. Next to pushing new code, they can immediately update wiki pages and file new bugs. There is one issue with all that. Github doesn't provide a way to attach images to wiki pages nor to the issues. Well, partially...

Options

There are several ways you can get around this. You can create a new repository or a new Gist and add images to it. Then you link those images from your wiki pages or issues by including the image URL in the Markdown syntax form:

![My Image](https://gist.github.com/raw/2128151/81b1ec2c135905ebfd545a30120ba060183e25cd/myimage.png)

You can use the same trick to link to images from anywhere on the Internet.

However, this hack has a couple of disadvantages. You have to create a specialized repo or Gist, clutter your existing repo with temp files, or have an own storage somewhere on the Internet.

Alternative

This post proposes an alternative way (though using a similar mechanism) to attach not only images but also diagrams and other vector graphics to your Github wiki pages and issues. You don't have to enter the command line at all nor have a storage on the Internet.

Howto

  1. Create a figure on Figurepool. Embed an image you like into your figure. This can be done by either using a direct URL to your image or by drag & dropping an image from your desktop.
  2. [Optional] Comment/adjust your image using the vector graphics editor provided. You can create any kind of diagram.
  3. Save your figure and click the little orange button in the figure thumb which pops up an export dialog.
  4. Copy the Markdown formatted PNG link of your figure and paste it to your Github wiki pages or issues. The link looks something like:

![My New Figure](http://figurepool.com/figure/view/7774b3b7f5ceba1d47fac95f540444cb.png)

You're done. Your figure will be nicely embedded in your wiki page or issue on Github. Enjoy!

Visual summary

(Created with Figurepool itself.)

Embed images and diagrams in Github


Posted by David Durman, November 22, 2012