1
00:00:00,000 --> 00:00:04,160
Have you ever found yourself, you know, needing to draw a diagram, maybe for a

2
00:00:04,160 --> 00:00:05,360
system or a process,

3
00:00:05,360 --> 00:00:08,720
or even just a simple flowchart, and you think about opening up some complicated

4
00:00:08,720 --> 00:00:09,280
software and you

5
00:00:09,280 --> 00:00:13,600
just, oh, sigh, all that dragging and dropping, finding the right shapes that can

6
00:00:13,600 --> 00:00:14,480
be a real drag?

7
00:00:14,480 --> 00:00:17,840
Well, today we're doing a deep dive into something that might just change all that

8
00:00:17,840 --> 00:00:18,640
for you.

9
00:00:18,640 --> 00:00:23,000
Kroki. It's this really interesting technology aiming to make visual communication

10
00:00:23,000 --> 00:00:24,080
way easier.

11
00:00:24,080 --> 00:00:27,600
But before we unpack exactly how it works and why it's getting attention,

12
00:00:27,600 --> 00:00:32,530
a quick word from our supporter. This deep dive is brought to you by Safe Server.

13
00:00:32,530 --> 00:00:33,200
Safe Server handles

14
00:00:33,200 --> 00:00:36,140
hosting for software like Kroki and can really help with your digital

15
00:00:36,140 --> 00:00:37,440
transformation. You can

16
00:00:37,440 --> 00:00:44,460
find out more at www.safeserver.de. Okay, so our mission today is to demystify Kroki.

17
00:00:44,460 --> 00:00:44,800
We've looked

18
00:00:44,800 --> 00:00:48,230
at the info from their GitHub repository, their official website, and we're going

19
00:00:48,230 --> 00:00:48,800
to break it down

20
00:00:48,800 --> 00:00:53,200
so anyone really technical background or not can get what it is, how it works, and

21
00:00:53,200 --> 00:00:54,640
why it might be

22
00:00:54,640 --> 00:00:59,470
a game changer. Yeah, what's really fascinating, I think, is how Kroki bridges that

23
00:00:59,470 --> 00:01:00,960
gap. You know,

24
00:01:00,960 --> 00:01:05,760
between just plain text and these quite complex professional-looking visuals, it

25
00:01:05,760 --> 00:01:07,040
makes diagramming

26
00:01:07,040 --> 00:01:11,840
accessible in a way traditional tools often don't. Right, so let's unpack that. At

27
00:01:11,840 --> 00:01:12,960
its core, Kroki

28
00:01:12,960 --> 00:01:17,360
creates diagrams from text descriptions. You literally write some simple text,

29
00:01:17,360 --> 00:01:17,760
maybe a few

30
00:01:17,760 --> 00:01:22,780
lines that look a bit like code, and boom, out pops a diagram. Which sounds almost

31
00:01:22,780 --> 00:01:23,440
too simple,

32
00:01:23,440 --> 00:01:27,240
doesn't it? But why is that actually a big deal? Especially if you're maybe just

33
00:01:27,240 --> 00:01:28,000
starting out with

34
00:01:28,000 --> 00:01:31,850
diagrams. Most tools, you know, they have a specific interface you need to learn.

35
00:01:31,850 --> 00:01:32,800
Drag and drop,

36
00:01:32,800 --> 00:01:37,200
menus, sometimes different software for different types of diagrams. Kroki just

37
00:01:37,200 --> 00:01:37,840
cuts through that.

38
00:01:37,840 --> 00:01:41,550
Describe it in text, it draws it. And here's where it gets really powerful, I think.

39
00:01:41,550 --> 00:01:42,400
Kroki is a

40
00:01:42,400 --> 00:01:46,470
unified API. That means it acts like one single doorway to a whole bunch of

41
00:01:46,470 --> 00:01:47,600
different diagram

42
00:01:47,600 --> 00:01:51,620
tools and libraries. A massive array, actually. Yeah, we're talking things like

43
00:01:51,620 --> 00:01:52,240
PlantUML,

44
00:01:52,240 --> 00:01:57,680
which is great for sequence diagrams. BPMN for business processes. C4 for software

45
00:01:57,680 --> 00:01:58,480
architecture.

46
00:01:58,480 --> 00:02:04,300
Graph Fizz. Mermaid, which is super popular. Excalibur for more sketch-like

47
00:02:04,300 --> 00:02:06,160
diagrams. Dita,

48
00:02:06,160 --> 00:02:10,240
Erd. The list is huge. It really is. And connecting that to the bigger picture,

49
00:02:10,240 --> 00:02:16,020
it just massively reduces friction. Think about developers, analysts, project

50
00:02:16,020 --> 00:02:16,640
managers,

51
00:02:17,600 --> 00:02:21,650
anyone needing to visualize something. Suddenly, you don't need to install five

52
00:02:21,650 --> 00:02:22,720
different tools,

53
00:02:22,720 --> 00:02:28,300
learn five interfaces, worry about compatibility. Exactly. Kroki aims to be ready

54
00:02:28,300 --> 00:02:29,920
to use. No complex

55
00:02:29,920 --> 00:02:34,120
setup for the public service. It's simple because of that unified API. And it's

56
00:02:34,120 --> 00:02:34,960
free and open-source,

57
00:02:34,960 --> 00:02:38,720
which is huge. It's on GitHub. The goal is a free service. Plus, it's designed to

58
00:02:38,720 --> 00:02:39,520
be fast.

59
00:02:39,520 --> 00:02:43,520
Modern architecture. Pretty efficient. So what does that mean for you listening? It

60
00:02:43,520 --> 00:02:44,400
means you can whip

61
00:02:44,400 --> 00:02:49,120
up quite sophisticated diagrams without needing graphic design skills or spending

62
00:02:49,120 --> 00:02:50,000
ages learning

63
00:02:50,000 --> 00:02:53,400
specific software. It's kind of a shortcut. It is. It's a shortcut to clear

64
00:02:53,400 --> 00:02:54,240
communication.

65
00:02:54,240 --> 00:02:58,800
I remember wrestling with alignment tools and drawing software for aging. Just

66
00:02:58,800 --> 00:02:59,600
typing it sounds

67
00:02:59,600 --> 00:03:03,490
so much better. Definitely. It forces you to think clearly, too, maybe. Like, you

68
00:03:03,490 --> 00:03:04,080
have to describe

69
00:03:04,080 --> 00:03:08,400
the relationships logically in text first. That's a really good point, actually. It's

70
00:03:08,400 --> 00:03:08,800
not just about

71
00:03:08,800 --> 00:03:13,000
the output. Writing it down forces clarity, unlike just, you know, randomly moving

72
00:03:13,000 --> 00:03:13,840
boxes around on a

73
00:03:13,840 --> 00:03:18,460
canvas. Okay, so we get what it is and why it's pretty significant. But how does

74
00:03:18,460 --> 00:03:19,680
the magic happen?

75
00:03:19,680 --> 00:03:26,020
How does Kroki turn your text into, say, an SVG or a PNG image? Right, the under-the-hood

76
00:03:26,020 --> 00:03:26,560
stuff.

77
00:03:26,560 --> 00:03:32,760
It mainly uses an HTTP API. An API is just, what, a standardized way for computer

78
00:03:32,760 --> 00:03:33,520
programs to talk

79
00:03:33,520 --> 00:03:37,280
to each other, send information back and forth. Okay. And Kroki handles both Git-T

80
00:03:37,280 --> 00:03:37,920
and Post-Secret

81
00:03:37,920 --> 00:03:41,330
Requests, basically ways of sending instructions. So let's take the GeT request

82
00:03:41,330 --> 00:03:42,320
first. That's where

83
00:03:42,320 --> 00:03:46,260
the diagram description gets encoded into the URL itself. Exactly. So that simple

84
00:03:46,260 --> 00:03:46,720
example,

85
00:03:46,720 --> 00:03:51,520
bob-alice.hell, hello, in PlantUML. Yeah. It gets compressed and encoded into this

86
00:03:51,520 --> 00:03:52,800
string of characters

87
00:03:52,800 --> 00:03:57,120
and becomes part of the URL, like geet-plantl-mells-vg followed by that encoded

88
00:03:57,120 --> 00:03:57,600
string.

89
00:03:57,600 --> 00:04:03,360
syskj2rkt3-coccanellerr1.io4 is a dose of 70,000 or something similar. Yeah,

90
00:04:03,360 --> 00:04:03,920
something like that.

91
00:04:03,920 --> 00:04:08,240
It uses deflate compression and then base64 encoding. Sounds complex, but the point

92
00:04:08,240 --> 00:04:08,640
is it

93
00:04:08,640 --> 00:04:12,240
packages your text neatly into the web address. But you don't need to do the

94
00:04:12,240 --> 00:04:13,200
encoding yourself

95
00:04:13,200 --> 00:04:17,520
necessarily, right? There are tools for that. Absolutely. The docs even show a

96
00:04:17,520 --> 00:04:18,480
Python one-liner

97
00:04:18,480 --> 00:04:23,200
to do it, but often you'd use a library or an integration that handles it. However,

98
00:04:23,200 --> 00:04:23,520
there's

99
00:04:23,520 --> 00:04:28,410
also the POST request method. Which is often simpler for users. Generally, yeah.

100
00:04:28,410 --> 00:04:28,880
Especially

101
00:04:28,880 --> 00:04:33,370
for longer diagrams. With POST, you don't stuff everything into the URL. You send

102
00:04:33,370 --> 00:04:34,160
the diagram

103
00:04:34,160 --> 00:04:40,090
source text, the type of diagram, and the output format you want, like SVG or PNG.

104
00:04:40,090 --> 00:04:40,560
Usually as a

105
00:04:40,560 --> 00:04:45,730
JSON object in the request body. So that Bob Assala sat hello example would just

106
00:04:45,730 --> 00:04:46,400
look like.

107
00:04:46,400 --> 00:04:50,910
Sending a little package with diagram source is the text. Diagram type is plantable.

108
00:04:50,910 --> 00:04:51,520
Output format

109
00:04:51,520 --> 00:04:55,910
is SVG. Precisely. Much cleaner, much more readable, especially when your diagram

110
00:04:55,910 --> 00:04:56,640
description gets

111
00:04:56,640 --> 00:05:00,310
longer. And you can even send plain text directly, apparently, with the right

112
00:05:00,310 --> 00:05:01,840
headers. You can, yeah.

113
00:05:01,840 --> 00:05:05,030
Setting the content type header to text plane, that may be the accept header for

114
00:05:05,030 --> 00:05:06,080
the output format.

115
00:05:06,080 --> 00:05:11,720
Or even put the output format in the URL path for a post C, like post T plantamalsvg.

116
00:05:11,720 --> 00:05:12,560
Okay. So the

117
00:05:12,560 --> 00:05:17,290
main point is flexibility. You can talk to Kroki using pretty much any standard web

118
00:05:17,290 --> 00:05:18,240
tool or code.

119
00:05:18,240 --> 00:05:24,000
Any HTTP client. Exactly. Browser, command line, like C or RL, scripting languages.

120
00:05:24,000 --> 00:05:28,240
So how does it manage all those different diagram types then? Mermaid, plant UML,

121
00:05:28,240 --> 00:05:32,800
GraphViz. They're all separate projects. Ah, that's down to its architecture.

122
00:05:32,800 --> 00:05:38,070
It's quite clever and modular. There's a central server. It's actually a Java web

123
00:05:38,070 --> 00:05:38,720
server acting

124
00:05:38,720 --> 00:05:42,720
as the main entry point, the gateway. Okay. But then for many of the individual

125
00:05:42,720 --> 00:05:43,680
diagram libraries,

126
00:05:43,680 --> 00:05:48,800
it uses separate companion servers or sometimes Node.js command line tools. So when

127
00:05:48,800 --> 00:05:49,280
a request

128
00:05:49,280 --> 00:05:54,520
comes in for, say, mermaid, the main server passes it off to the specific mermaid

129
00:05:54,520 --> 00:05:55,360
service.

130
00:05:55,360 --> 00:05:58,720
Ah, so it's like a manager directing traffic to different specialists.

131
00:05:58,720 --> 00:06:04,080
Exactly. It means they can add support for new diagram types relatively easily just

132
00:06:04,080 --> 00:06:04,560
by adding a

133
00:06:04,560 --> 00:06:08,350
new companion service without messing with the core gateway. That makes sense. Keeps

134
00:06:08,350 --> 00:06:08,880
it nimble.

135
00:06:08,880 --> 00:06:11,920
Very much so. It allows it to evolve as new tools pop up.

136
00:06:11,920 --> 00:06:14,400
Right. So if someone's listening and thinking, okay, I want to try this,

137
00:06:14,400 --> 00:06:17,440
what's the easiest way in? The absolute simplest way is just

138
00:06:17,440 --> 00:06:23,680
go to croquis.io. They run croquis as a free public service right there.

139
00:06:23,680 --> 00:06:27,280
Ready to use in the browser or through those API calls we talked about?

140
00:06:27,280 --> 00:06:30,800
Yep. No installation needed. Just start sending requests

141
00:06:30,800 --> 00:06:34,400
or use the simple interface they have on the site. Perfect for trying it out.

142
00:06:34,400 --> 00:06:38,640
But what if you want to run it yourself? Maybe for privacy or internal use?

143
00:06:38,640 --> 00:06:42,480
You could do that too. It's open source. Remember, you can self-manage it,

144
00:06:42,480 --> 00:06:46,400
download the code, install it on your own server. The documentation mentions it

145
00:06:46,400 --> 00:06:50,000
probably requires a bit of Linux know-how to set up smoothly.

146
00:06:50,000 --> 00:06:54,560
Okay, so maybe not for total beginners to self-host, but the options there.

147
00:06:54,560 --> 00:06:58,400
Right. But for just using it, that free service is fantastic.

148
00:06:58,400 --> 00:07:02,570
And it's supported by sponsors like Exoscale providing servers, which keeps it

149
00:07:02,570 --> 00:07:03,040
running.

150
00:07:03,040 --> 00:07:08,560
And that commitment to being free and open source really stands out. MIT license.

151
00:07:08,560 --> 00:07:09,680
Yeah, very permissive.

152
00:07:09,680 --> 00:07:12,400
Available on GitHub for anyone to look at, contribute to.

153
00:07:12,400 --> 00:07:15,760
And you can host it yourself with pretty minimal resources, apparently.

154
00:07:15,760 --> 00:07:18,320
They even say on the site, crookie is never going away.

155
00:07:19,040 --> 00:07:21,600
That's quite a statement. Shows confidence in the model.

156
00:07:21,600 --> 00:07:26,720
It does. And that open approach really encourages community involvement.

157
00:07:26,720 --> 00:07:28,960
The sources mentioned they're actively planning the future,

158
00:07:28,960 --> 00:07:32,560
even have a questionnaire out asking for user input.

159
00:07:32,560 --> 00:07:35,040
Ah, so they're listening to users.

160
00:07:35,040 --> 00:07:38,960
Seems like it. It reflects that idea that more perspectives make things better.

161
00:07:38,960 --> 00:07:42,800
Plus, they provide good resources, a cheat sheet, lots of examples.

162
00:07:42,800 --> 00:07:45,920
Decent documentation makes it easier to get started.

163
00:07:45,920 --> 00:07:49,280
So it's not just code thrown over the wall, it's an active project.

164
00:07:49,280 --> 00:07:51,200
Definitely feels like a living project, yeah.

165
00:07:51,200 --> 00:07:53,360
Okay, so stepping back a bit.

166
00:07:53,360 --> 00:07:57,040
Beyond just making diagrams quickly, what's the bigger picture here?

167
00:07:57,040 --> 00:08:00,560
Why does simplifying visualization like this really matter?

168
00:08:00,560 --> 00:08:04,800
Well, knowledge is only useful if it's understood and can be applied, right?

169
00:08:04,800 --> 00:08:07,120
Visuals are just incredibly powerful for that.

170
00:08:07,120 --> 00:08:10,240
Croquis makes creating those visuals almost trivial.

171
00:08:10,240 --> 00:08:12,560
And think about modern workflows.

172
00:08:12,560 --> 00:08:16,960
You can actually store the text for your diagram right alongside your code in Git.

173
00:08:16,960 --> 00:08:19,920
So the diagram becomes part of your version control.

174
00:08:19,920 --> 00:08:20,560
Exactly.

175
00:08:20,560 --> 00:08:22,000
Diagrams is code.

176
00:08:22,000 --> 00:08:25,360
It means your documentation, your architecture diagrams,

177
00:08:25,360 --> 00:08:28,240
can evolve right along with the system itself.

178
00:08:28,240 --> 00:08:29,440
They stay up to date.

179
00:08:29,440 --> 00:08:30,400
That's huge.

180
00:08:30,400 --> 00:08:32,880
No more outdated diagrams floating around.

181
00:08:32,880 --> 00:08:34,400
Hopefully fewer anyway.

182
00:08:34,400 --> 00:08:38,440
It makes collaboration smoother, turns abstract ideas into something concrete and

183
00:08:38,440 --> 00:08:39,120
shareable.

184
00:08:39,120 --> 00:08:41,360
And it really lowers the barrier to entry, doesn't it?

185
00:08:41,360 --> 00:08:42,640
It democratizes it.

186
00:08:42,640 --> 00:08:44,160
You don't need to be a designer.

187
00:08:44,160 --> 00:08:46,960
You don't need expensive software licenses.

188
00:08:46,960 --> 00:08:51,840
Anyone who can write a bit of structured text can create a clear visual.

189
00:08:51,840 --> 00:08:56,000
It empowers more people to communicate their ideas effectively, quickly too.

190
00:08:56,000 --> 00:08:57,360
Yeah, speed seems key.

191
00:08:57,360 --> 00:08:59,760
And think about those industries mentioned in the sources,

192
00:08:59,760 --> 00:09:03,200
DevSecOps, healthcare, finance, manufacturing.

193
00:09:03,200 --> 00:09:04,880
Right, lots of complex systems there.

194
00:09:04,880 --> 00:09:08,640
Absolutely critical to understand workflows, architectures, processes in those

195
00:09:08,640 --> 00:09:09,200
fields.

196
00:09:09,200 --> 00:09:13,600
Kroki offers a simple, consistent way to generate those vital diagrams

197
00:09:13,600 --> 00:09:15,520
across different teams, different projects.

198
00:09:15,520 --> 00:09:17,680
So it promotes consistency as well.

199
00:09:17,680 --> 00:09:19,440
And maybe even better understanding,

200
00:09:19,440 --> 00:09:23,200
because you had to articulate it clearly in text first, like we discussed.

201
00:09:23,200 --> 00:09:25,520
We've covered a lot of ground here on Kroki.

202
00:09:25,520 --> 00:09:27,920
From what it is creating diagrams from text.

203
00:09:27,920 --> 00:09:30,960
Using that unified API for tons of formats.

204
00:09:30,960 --> 00:09:34,480
To how it works with HTTP requests, GET and POST.

205
00:09:34,480 --> 00:09:36,080
And its modular architecture.

206
00:09:36,080 --> 00:09:39,920
And how you can use the free service or self-host the open source tool.

207
00:09:39,920 --> 00:09:43,840
It really boils down to efficiency, accessibility,

208
00:09:43,840 --> 00:09:46,080
and making complex stuff easier to grasp.

209
00:09:46,080 --> 00:09:49,760
Hopefully this deep dive sparks some ideas, maybe an aha moment,

210
00:09:49,760 --> 00:09:52,160
about how text diagram could help you.

211
00:09:52,160 --> 00:09:53,760
Yeah, it's a powerful concept.

212
00:09:53,760 --> 00:09:55,600
So maybe think about it.

213
00:09:55,600 --> 00:09:59,760
What's one complex idea or process you've struggled to visualize recently?

214
00:09:59,760 --> 00:10:02,400
Perhaps Kroki is the tool to finally make that clear.

215
00:10:02,400 --> 00:10:03,840
For yourself or for your team.

216
00:10:04,720 --> 00:10:09,360
And before we wrap up, a huge thank you once again to our sponsor, Safe Server.

217
00:10:09,360 --> 00:10:12,720
They focus on hosting software solutions and supporting digital transformation

218
00:10:12,720 --> 00:10:13,360
journeys.

219
00:10:13,360 --> 00:10:16,560
Check them out at www.safeserver.de.

220
00:10:16,560 --> 00:10:17,360
Great stuff.

221
00:10:17,360 --> 00:10:19,280
Join us next time for another deep dive.

222
00:10:19,280 --> 00:10:23,200
Until then, keep exploring, keep learning, and keep asking questions.