8 ways to create illustrations outside of image generation AI! Save money on AI with tools
"Billing for image-generating AI has increased again"
Every time you make a diagram of a blog post or slide, do you think so?Midjourney, DALL-E, Stable Diffusion —— The quality is high, but the token or monthly price flies every time you use it.
In fact, there are many ways to create visuals without using image generation AI.Moreover, since it can be reproduced with code, the modification is easy and the quality is stable.In this article, I will introduce 8 methods that I actually use.
Why have an option that doesn't use image-generating AI?
There is a scene where the image generation AI is not suitable.
- * * Illustration with a lot of corrections * *: need to regenerate each time "arrows a little more to the right" "change color" - * * Want to visualize data * *: Generated AI cannot be used to graph numbers - * * Require repeatability * *: I want the same diagrams to be of the same quality over and over again - * * Want to keep costs down * *: If you make dozens of pieces a month, you'll charge more
Illustrations made with code can be managed with text files, and differences can also be taken with git.The idea is to "manage the visual source code".
Method 1: mermaid — Flow and configuration diagrams are now 90% resolved
* * For * *: flowcharts, sequence diagrams, git charts, ER diagrams
graph LR
A [User] -- > B [Browser]
B -- > C [Server]
C-- > D [DB]
Just write like this and it becomes a diagram.Since it is text, you can git manage it together with Markdown.It is also convenient to be rendered as is on GitHub.
Cost: * * Free * *. Just install `@ mermaid-js/mermaid-cli' on npm.
80% can be covered by mermaid if it is a diagram of the technical blog.It's the first option to try.
Method 2: PlantUML — I want more control over my UML diagrams
* * What you're looking for * *: Class diagrams, component diagrams, sequence diagrams (when mermaid is out of line)
@ startuml
Alice- > Bob: Request
Bob -- > Alice: Response
@ enduml
it is the same "generate diagrams from text" approach as mermaid, but it is highly compliant with the UML specification and allows fine-grained style control.It is suitable for design documents and architectural descriptions.
Cost: * * Free * *.Java required. Generate PNG/SVG with `plantuml` command.
Method 3: Markmap — Mind map from the Markdown heading
* * What's good for * *: Organize concepts, visualize chapters, and map knowledge
'' 'markdown # Themes # # Major Item A # # # Subparagraph A-1 # # # Subparagraph A-2 # # Major Item B ```
It converts this Markdown into a mind map.The advantage is that it can be created at zero cost from existing Markdown documents without having to learn the notation separately.
Cost: * * Free * *. Install `markmap-cli` at npm.
Method 4: Graphviz — Dependencies in dot Language
* * For * *: Package dependencies, build graphs, directed graphs in general
'' 'dot digraph { A- > B A- > C B- > D } ```
Draw directed graphs with simple notation.Easy to use to visualize CI/CD pipeline diagrams and library dependencies.
Cost: * * Free * *, ready to use with `brew install graphviz`.
Method 5: matplotlib — A diagram with data in Python
* * Orientation * *: bar chart, line chart, scatter chart, heat map
A standard graph library for Python.If you hand over numerical data, it becomes a graph.
'' 'python import matplotlib.pyplot as plt
labels = ['mermaid', 'PlantUML', 'Markmap', 'Graphviz', 'matplotlib'] ease = [5, 3, 5, 4, 4]
plt.bar (labels, ease, color = 'steelblue') plt.title ('Ease of setup (out of 5)') plt.savefig ('comparison.png', dpi = 150, bbox_inches = 'tight') ```
All you have to do is change the code and run it again.After realizing that it was completely unnecessary to "ask an image-generating AI to generate a bar graph", I was able to replace a considerable number of sheets with matplotlib alone.
Cost: * * Free * *. `uv add matplotlib` one shot.
Method 6: Pillow — Badges, Annotations, and Image Processing in Python
* * Orientation * *: images with text, badge-like designs, annotations to screenshots
'' 'python from PIL import Image, ImageDraw
img = Image.new ('RGB', (400, 200), color = '# 1a2a4a') draw = ImageDraw.Draw (img) draw.text ((20, 80), "✅Done", fill = 'white', font_size = 40) img.save ('badge.png') ```
If you had an image-generating AI create badges like "○○Done", "Attention", and "new", you can create them in Pillow in seconds.Fully control font, color, and position.
Cost: * * Free * *. `uv add Pillow'.
Method 7: D3.js — Diagrams and network diagrams in SVG
* * What's good for * *: diagrams of relationships between nodes, visualization of dependencies, hierarchical structure
D3.js is a library that runs in a browser, but you can use `d3-node` + `jsdom` to output SVG files on Node.js.
Especially when you want to draw a graph like "A depends on B and B depends on C and D", D3.js is more flexible than mermaid.The color, size, and layout of the nodes can be determined as data-driven.
Cost: * * Free * *.Setup requires a Node.js environment, which is a bit more hassle than mermaid.
Method 8: Blender — Rich 3D diagrams are auto-generated in MCP
* * For * *: 3-D views of server configurations, 3D infographics of architectures, blog portraits
Blender is 3DCG software, but AI can operate Blender in natural language using the MCP server.If you instruct "create a diagram connecting the database server and the web server", it will be rendered as a 3D scene.
There are scenarios where Blender is more suitable for technical articles to "represent the exact configuration three-dimensionally" than to create a "feel-alike" diagram with image-generating AI.
Cost: * * Free * * (Blender is free and commercially available).However, Blender installation and MCP server setup are required.
Which one to choose
When in doubt, the criteria are simple.
| Things I want to make | Choices | |-------------|------| | flow sequence git graph | mermaid | | UML - Fine Sequence Control | PlantUML | | Mind Map | Markmap | | Dependencies and Directed Graphs | Graphviz | | Numerical Data Graph | matplotlib | | Badged & Annotated Images | Pillow | | Network Diagram | D3.js | | 3D Rich Visuals | Blender | | When ↑All Is Not Enough | Image Generation AI |
Demote the image generation AI to "last resort".In doing so, my monthly billing fell by less than half in my experience.
Wrap-up
If you are concerned about the cost of image generation AI, first try mermaid and matplotlib.Both are 5 minutes of installation, free of charge, and reproducible, and can cover most of the technical illustrations.
If you get into the habit of creating diagrams with code, you can get out of the loop of "regenerating every time you modify".Since visuals can be managed as source code, they are also compatible with slides used by the team and articles that are continuously updated.
Image generation AI is a powerful tool, but it is worth it to narrow down the places where it is used.
---
* All of the tools featured in this article are free and open source.Commercial use is also possible. *
---
*Machine-translated (MyMemory API) from a Japanese original at [nomuraya-hub.pages.dev](https://nomuraya-hub.pages.dev/). Pre-review draft. I am the same author writing under different pen names — "nomuraya / shimajima / 中翔" — depending on the medium.*