Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Interactive architecture diagrams for JavaScript.



Add the following JavaScript and CSS to your HTML:

  <script src="" charset="utf-8"></script>
  <script src="" charset="utf-8"></script>
  <link rel="stylesheet" href="">
  <link rel="stylesheet" href="">

Note: interactive-architecture needs D3.js to work. You can use the version included in this repository, use a CDN, or use a local copy.

Then, add a container for the diagram:

    <div id='architecture'>

Finally, create the interactive architecture diagram using JavaScript:

var config = {
  getHref: function (link) {
    return link.getAttribute('xl:href')
  getStyle: function (href, link) {
    return {
      fill: 'rgba(255, 255, 255, 0)',
      strokeWidth: '2px'
  getPopupContents: function (href, link) {
    if (href.indexOf('') >= 0) {
      return iA.gitHub.getReadme(href)

iA.architecture.create('#architecture', 'architecture.svg', config)

Creating SVG diagrams

It's easy! Download and install Omnigraffle, create your architecture diagram and add links to each component's GitHub repository:

  1. Go to the properties pane of an object;
  2. Add an Opens an URL action;
  3. Add the HTTPS URL of the component's GitHub repository (or any other URL)

Or, if you don't want to use Omnigraffle, that's fine too! Just make sure architecture components are contained by an <a> element with an xl:href attribute, like so:

<a xl:href="">
  <path d="M 451 774 L 448 777 C 448 775.34315 449.34315 774 451 774 Z" />
    <tspan>Architecture Diagram</tspan>

If your SVG files use different namespaces for the href attributes (e.g. xlink:href), you can override the default namespace. See below for details.


iA.architecture.create(element, svg, [config], [callback])

Creates an interactive diagram from a SVG URL.


  • element: query selector of element that will hold the diagram
  • svg: URL of SVG file
  • config (optional): configuration object
  • callback (optional): function that is called when SVG is loaded and diagram is successfully created


var config = {
  // SVG elements which contain the architecture diagram's components
  //   e.g. ellipse, rect, circle. Default is path.
  element: 'path',

  // Returns the attribute containing the component's URL. The link parameter
  //   is one of the diagram's SVG <a> elements.
  getHref: function (link) {
    // Example:
    return link.getAttribute('xlink:href')

  // This function is called when a user clicks one the the diagram's
  //   components. The HTML returned by this function is displayed in a
  //   popup window. The return value can be a string, HTML, or a Promise
  //   returning HTML.
  getPopupContents: function (href, link) {
    // Example 1:
    return iA.gitHub.getReadme(href)

    // Example 2:
    return '💾💾 Popup contents! 💾💾'

Configuration is optional; unspecified options are replaced by default options.


interactive-architecture adds interactive-architecture class to the diagram's container element, you can use CSS to style components with links like this:

.interactive-architecture a > path {
  stroke: #ef5526;
  stroke-width: 4px;
  fill: white;

Sometimes, it might be necessary to use CSS' !imporant rule:

.interactive-architecture a > path {
  fill: red !important;

iA.gitHub.getReadme(org, [repo])

Returns a Promise that will load the file from the specified GitHub repository.


  • org: GitHub username or organization of the README's repository
  • repo (optional): name of the README's repository (if not specified, getReadme will assume the first parameter is a comlete repository URL)




Interactive architecture diagrams with SVG




No releases published
You can’t perform that action at this time.