gatsby-example-using-remark

Graphviz

6 min read · tagged remark, React, Graphviz

Contents

Rendering dot code blocks

By adding gatsby-remark-graphviz to your Gatsby site, you can create graphs powered by Viz.js by adding dot code blocks in your Markdown files:

```dot
digraph graphname {
  a -> b;
  b -> c;
  a -> c;
}
```

Will render as:

graphname a a b b a->b c c a->c b->c

A code block without a dot or circo will not be processed:

digraph graphname {
  a -> b;
  b -> c;
  a -> c;
}

Adding custom attributes

You can add custom attributes to the resulting SVG:

```dot id="small-digraph" style="border: solid 3px tomato; box-shadow: 5px 5px 5px; padding: 15px; box-sizing: content-box" class="graphviz-figure" data-mydata123
digraph graphname {
  a -> b;
  b -> c;
  a -> c;
}
```

Will render as:

graphname a a b b a->b c c a->c b->c

Don’t be shy, go ahead and inspect that SVG and see all the attributes added to it.

Width, height and responsiveness

You can control the layout, spacing and size of the rendered SVG by using Graphviz attributes like this:

```dot
digraph graphname {
  graph [size="1.5,1.5"];
  a -> b;
  b -> c;
  a -> c;
}
```

This will give you a slighly smaller SVG:

graphname a a b b a->b c c a->c b->c

Alternatively, you can overwrite those values by passing custom SVG attributes like this:

```dot width="178pt" height="auto"
digraph graphname {
  a -> b;
  b -> c;
  a -> c;
}
```

Whoa!

graphname a a b b a->b c c a->c b->c

By default, gatsby-remark-graphviz is adding the following inline style to every rendered SVG:

max-width: 100%;
height: auto;

This will make graphs work as expected most of the time - small graphs will remain small and big ones will shrink to fit the parent’s box. Graphs can get really big (from Gatsby the docs):

graphname cluster_legend Legend gatsby Gatsby redux redux namespace cache site/.cache/ public site/public/ siteData site/external data dataSource data sources. e.g file, contentful sourceNodes source nodes dataSource->sourceNodes nodes nodes sourceNodes->nodes nodesTouched touchedNodes sourceNodes->nodesTouched rootNodeMap rootNodeMap sourceNodes->rootNodeMap generateSchema generate schema nodes->generateSchema schema schema (inc resolvers) nodes->schema rootNodeMap->generateSchema pluginResolvers plugin resolvers pluginResolvers->generateSchema generateSchema->schema createPages site.createPages schema->createPages runQueries extract and run queries schema->runQueries componentFiles React components (src/template.js) componentFiles->createPages pages pages createPages->pages components components createPages->components pages->runQueries writePages writePages pages->writePages buildHtml build-html.js pages->buildHtml components->runQueries components->writePages fragments query fragments *.js fragments->runQueries componentsWithQueries components (with queries) runQueries->componentsWithQueries queryResults JSON result /public/static/d/dataPath runQueries->queryResults dataPaths jsonDataPaths runQueries->dataPaths componentChunks component chunks component---src-blog-[hash].js queryResults->componentChunks dataPaths->writePages dataJson data.json writePages->dataJson asyncRequires async-requires.js writePages->asyncRequires syncRequires sync-requires.js writePages->syncRequires pagesJson pages.json writePages->pagesJson productionApp production-app.js dataJson->productionApp staticEntry static-entry.js dataJson->staticEntry asyncRequires->productionApp syncRequires->staticEntry appWebpack configure webpack (`build-javascript`) buildJavascript build-javascript.js appWebpack->buildJavascript productionApp->buildJavascript buildJavascript->componentChunks appChunk app-[hash].js buildJavascript->appChunk webpackStats webpack.stats.json buildJavascript->webpackStats chunkMap chunk-map.json buildJavascript->chunkMap webpackStats->staticEntry chunkMap->staticEntry htmlWebpack configure webpack (`build-html`) htmlWebpack->buildHtml staticEntry->buildHtml pageRenderer page-renderer.js buildHtml->pageRenderer htmlFiles html files (index.html) buildHtml->htmlFiles pageRenderer->buildHtml

You can overwrite the style attribute if you don’t like that behaviour:

```dot style=""
digraph graphname {

  node [ style = filled, fillcolor = white ];

  ## Legend

  subgraph cluster_legend {
    ...
```

There:

graphname cluster_legend Legend gatsby Gatsby redux redux namespace cache site/.cache/ public site/public/ siteData site/external data dataSource data sources. e.g file, contentful sourceNodes source nodes dataSource->sourceNodes nodes nodes sourceNodes->nodes nodesTouched touchedNodes sourceNodes->nodesTouched rootNodeMap rootNodeMap sourceNodes->rootNodeMap generateSchema generate schema nodes->generateSchema schema schema (inc resolvers) nodes->schema rootNodeMap->generateSchema pluginResolvers plugin resolvers pluginResolvers->generateSchema generateSchema->schema createPages site.createPages schema->createPages runQueries extract and run queries schema->runQueries componentFiles React components (src/template.js) componentFiles->createPages pages pages createPages->pages components components createPages->components pages->runQueries writePages writePages pages->writePages buildHtml build-html.js pages->buildHtml components->runQueries components->writePages fragments query fragments *.js fragments->runQueries componentsWithQueries components (with queries) runQueries->componentsWithQueries queryResults JSON result /public/static/d/dataPath runQueries->queryResults dataPaths jsonDataPaths runQueries->dataPaths componentChunks component chunks component---src-blog-[hash].js queryResults->componentChunks dataPaths->writePages dataJson data.json writePages->dataJson asyncRequires async-requires.js writePages->asyncRequires syncRequires sync-requires.js writePages->syncRequires pagesJson pages.json writePages->pagesJson productionApp production-app.js dataJson->productionApp staticEntry static-entry.js dataJson->staticEntry asyncRequires->productionApp syncRequires->staticEntry appWebpack configure webpack (`build-javascript`) buildJavascript build-javascript.js appWebpack->buildJavascript productionApp->buildJavascript buildJavascript->componentChunks appChunk app-[hash].js buildJavascript->appChunk webpackStats webpack.stats.json buildJavascript->webpackStats chunkMap chunk-map.json buildJavascript->chunkMap webpackStats->staticEntry chunkMap->staticEntry htmlWebpack configure webpack (`build-html`) htmlWebpack->buildHtml staticEntry->buildHtml pageRenderer page-renderer.js buildHtml->pageRenderer htmlFiles html files (index.html) buildHtml->htmlFiles pageRenderer->buildHtml

Avatar of Jay GatsbyJay Gatsby is a mysterious millionaire with shady business connections.

powered by @gatsbyjs