Generate many types of diagrams in Livebook w/ Kroki API

diagrams_kroki_api.livemd

New chats

Section

Doc at: https://kroki.io/examples.html#blockdiag

http://blockdiag.com/en/blockdiag/examples.html

Mix.install([
  {:kino, "~> 0.5.2"}
])

{:ok, _} = Application.ensure_all_started(:inets)
{:ok, _} = Application.ensure_all_started(:ssl)

defmodule Diagram do
  @types ~w(
    actdiag blockdiag c4plantuml ditaa dot erd graphviz packetdiag
    nomnoml nwdiag plantuml seqdiag svgbob umlet vega vegalite  
  )a

  def get_svg(input, type) when type in @types do
    result = input |> :zlib.compress() |> Base.url_encode64()

    url = "https://kroki.io/#{type}/svg/#{result}" |> to_charlist()
    {:ok, {{_, 200, _}, _headers, body}} = :httpc.request(url)

    body
    |> IO.iodata_to_binary()
    |> Kino.Image.new(:svg)
  end

  @types
  |> Enum.each(fn type ->
    def unquote(type)(input) do
      get_svg(input, unquote(type))
    end
  end)
end

import Diagram

graphviz("""
digraph G {Hello->World}
""")

plantuml("""
@startmindmap
+ Types of diagrams
++ a mindmap
++ any uml diagrams
-- Generated from
--- Livebook
--- an API
---- Kroki
@endmindmap
""")

Contenu de type "texte légaux"

plantuml("""
@startwbs
skinparam monochrome true
* Home
** About
** Showcase
** Sign Up
** Blog
*** Article
*** Authors
@endwbs
""")

erd("""
[Person]
*name
height
weight
+birth_location_id

[Location]
*id
city
state
country

Person *--1 Location
""")

plantuml("""
@startuml
left to right direction
skinparam packageStyle rectangle
skinparam monochrome true
actor customer
actor clerk
rectangle checkout {
  customer -- (checkout)
  (checkout) .> (payment) : include
  (help) .> (checkout) : extends
  (checkout) -- clerk
}
@enduml
""")

packetdiag("""
packetdiag {
  colwidth = 32;
  node_height = 72;

  0-15: Source Port;
  16-31: Destination Port;
  32-63: Sequence Number;
  64-95: Acknowledgment Number;
  96-99: Data Offset;
  100-105: Reserved;
  106: URG [rotate = 270];
  107: ACK [rotate = 270];
  108: PSH [rotate = 270];
  109: RST [rotate = 270];
  110: SYN [rotate = 270];
  111: FIN [rotate = 270];
  112-127: Window;
  128-143: Checksum;
  144-159: Urgent Pointer;
  160-191: (Options and Padding);
  192-223: data [colheight = 3];
}
""")

c4plantuml("""
@startuml
!include C4_Context.puml

LAYOUT_WITH_LEGEND()

title System Context diagram for Internet Banking System

Person(customer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts.")
System(banking_system, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

System_Ext(mail_system, "E-mail system", "The internal Microsoft Exchange e-mail system.")
System_Ext(mainframe, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

Rel(customer, banking_system, "Uses")
Rel_Back(customer, mail_system, "Sends e-mails to")
Rel_Neighbor(banking_system, mail_system, "Sends e-mails", "SMTP")
Rel(banking_system, mainframe, "Uses")
@enduml
""")