How to configure Asciidoctor Diagram in a Jekyll site

jekyll-asciidoctor-diagram.adoc

How to configure Asciidoctor Diagram in a Jekyll site

• Generate site
• Initialize site
• Add and configure AsciiDoc plugins
• Create content
• Test 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.