Skip to content

Instantly share code, notes, and snippets.

@mojavelinux
Last active November 26, 2022 13:06
Show Gist options
  • Save mojavelinux/968623c493190dd61c059c2d85f9bdc3 to your computer and use it in GitHub Desktop.
Save mojavelinux/968623c493190dd61c059c2d85f9bdc3 to your computer and use it in GitHub Desktop.
How to configure Asciidoctor Diagram in a Jekyll site

How to configure Asciidoctor Diagram in a Jekyll site

Generate site

$ cd /tmp
$ mkdir jekyll-site-creator
$ cd jekyll-site-creator
$ rvm use 2.4
Gemfile (create)
source 'https://rubygems.org'

gem 'jekyll', '~> 3.4.3'
$ bundle --path=.bundle/gems
$ bundle exec jekyll new ../jekyll-site
$ sed -i '/^ruby RUBY_VERSION$/d' ../jekyll-site/Gemfile
$ echo 2.4 > ../jekyll-site/.ruby-version

Initialize site

$ cd ../jekyll-site
$ bundle --path=.bundle/gems

Add and configure AsciiDoc plugins

Gemfile (modify)
group :jekyll_plugins do
  gem 'asciidoctor-diagram', '~> 1.5.4'
  gem 'jekyll-asciidoc', '~> 2.0.1'
end
$ bundle
_config.yml (append)
keep_files:
  - images
asciidoctor:
  base_dir: :docdir
  safe: unsafe
  attributes:
    imagesdir: /images

Create content

$ wget -P images https://jekyllrb.com/img/logo-2x.png
diagram.adoc (create)
= Diagram
:page-layout: page

This page shows diagrams being used in a regular page.

[ditaa,memory,png]
....

      +--------+
   0  |        |  <- start
      +--------+
   1  |        |  <- q  scans from start to end
      +--------+
      :  ..... |
      +--------+
      |        |  <- end
      +--------+  <-+
      |        |    |
      +--------+    | rest of the
      :  ..... |    | allocated memory
      +--------+    |
  n   |        |    |
      +--------+  <-+
....

Powered by:

image::logo-2x.png[Jekyll]
_posts/2017-05-20-diagram-in-a-post.adoc (create)
= Diagram in a Post
:page-layout: post
:page-categories: [jekyll, asciidoc]

This page shows diagrams being used in a post.

[graphviz,cyclic,svg]
....
digraph g {
    a -> b
    b -> c
    c -> d
    d -> a
}
....

Powered by:

image::logo-2x.png[Jekyll]

Test site

$ bundle exec jekyll serve

Visit http://localhost:4000 to see the result.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment