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
""")