aiseed.dev›AI-Native Software Development
2-13 / Series
2-13 № 13 · 2026

Diagrams and documents,
made from text.

Diagrams, slides, even 3D — all produced from text and code

2026.09.21 🌐 日本語

Diagrams, slides, and the documents you hand out all come out of text and code.

2-12: Build an API — Expose Core Logic with FastAPI gave you the vocabulary for looking at a screen and naming what is off (proximity, alignment, repetition, contrast), and the habit of fixing the design rules onto a single page. The same move works outside the screen as well.

This chapter walks the tools in order — the structural diagram in a chapter, the slides in a pitch, the documents you hand out, and on to 3D and CAD.

Purpose decides the tool

The diagrams and documents you make day to day fall into three kinds.

flowchart LR Intent["what you want
to convey (words)"] Intent --> MM["structural diagram
Mermaid"] Intent --> UI["screen draft
ask the AI for HTML"] Intent --> MP["slides
Markdown + Marp"] MM --> Out[("PDF / HTML / PNG")] UI --> Out MP --> Out classDef good fill:#e8f5e9,stroke:#7a9a6d,color:#3a4d34 classDef bad fill:#fef3e7,stroke:#c89559,color:#5a3f1a class MM,UI,MP good

What unites them: save the text and code that produced it, not the final PDF or PNG. The output can be rebuilt at any time.

Write structural diagrams in Mermaid

System layouts, organizations, data relationships — any diagram that conveys structure can be written in Mermaid. Every diagram in this series is Mermaid.

graph TD
  A[User] --> B[Web Server]
  B --> C[(Database)]
  B --> D[Cache]
  C -.->|slow| B

Four nodes and the arrows between them, in plain text.

Mermaid is text. A one-place edit to a diagram shows up in Git as one line added and one line removed, and the review is a glance. The AI reads it and rewrites it directly. A renderer years from now produces the same diagram.

The range is wide.

There is little to remember about writing it.

GitHub, Forgejo (2-06), Notion — most places render Mermaid as it is. There is no need to memorize the syntax. Ask "draw this structure in Mermaid" and it comes back. Reading it is enough.

Ask the AI for the screen draft, as HTML

"Screen drafts" and "UI mockups" belonged to Figma and Sketch. They take time to learn and carry a monthly fee.

The AI changes that. Ask "make a login form" and HTML + CSS + (if needed) JavaScript come back. Open it in a browser and there is a working screen. "More whitespace." "Use a blue palette." "Left-align it." Say it in words, and the code rewrites itself. Some AIs carry a dedicated screen-design feature; ordinary conversation is enough.

You: Make an inventory management screen UI. Product list, search box, add button.
AI:  (HTML+CSS returns)
You: More whitespace, three columns.
AI:  (revised version returns)

It is faster than Figma, and what comes back is code, so it can go straight to development. Hand it the rules page from 2-12 (12-column grid, spacing in multiples of 8, three colors, the type-size steps) and every screen gets the same rules applied.

In business, this is how it is used.

If a specialist designer is involved, make the draft and hand it over: "this direction, polished further." Fewer round trips, and the designer's time goes to brand consistency, print accuracy, and photo selection — the parts that need the expertise.

Write slides in Markdown and let Marp assemble them

Presentation decks, too, are written in Markdown. Marp converts Markdown into HTML slides or a PDF. Marp ships as a standalone binary, so no npm is needed (2-10). To stay inside apt, pandoc (in Debian 13) turns the same Markdown into reveal.js slides and a PDF. One slide is one section separated by ---.

# AI-Native Software Development

The toolkit of the Independence part

---

## Why now

The premises under the tools have inverted

---

## Conclusion

One person plus AI keeps the work running

That is three slides, exportable to PDF, HTML, and PNG.

The gap comes from whether prose and layout are mixed. In PowerPoint, every slide means deciding placement and text at the same time. In Markdown you write only the text; the template decides the placement. Fixing it is fixing the Markdown.

For the few slides that need a complex layout, have the AI write the HTML for that slide. Base in Markdown; decoration by the AI.

The side effects are large too.

The tools with steep learning curves are driven by code too

Mermaid, the AI's HTML, and Marp are everyday design. What follows are the specialist tools you had left alone because the learning curve was steep. Because the AI writes the scripts, code, and JSON, these tools drop into the hands of office workers, sole proprietors, and on-the-floor staff.

What follows (D3 / Blender / ComfyUI / CAD) is a preview of what becomes possible later. To start, Mermaid and the AI's HTML are enough. Once the everyday diagrams and documents are in your hands, come back to this section as needs arise. The skill of reading is all you ever need to enter.

flowchart LR Want["what you want
(described in words)"] Want --> D3["data visualization
D3.js"] Want --> BL["3D and video assets
Blender (bpy)"] Want --> CF["image generation
ComfyUI (JSON)"] Want --> CAD["mechanical CAD / 3D print
CadQuery / Build123d
OpenSCAD / FreeCAD"] D3 --> Out2[("HTML / SVG / PNG
STL / video")] BL --> Out2 CF --> Out2 CAD --> Out2 classDef good fill:#e8f5e9,stroke:#7a9a6d,color:#3a4d34 classDef bad fill:#fef3e7,stroke:#c89559,color:#5a3f1a class D3,BL,CF,CAD good

What unites the four: every one of them is driven by a script, code, or JSON. The AI writes that language, so the route through memorizing a GUI can be skipped.

Build elaborate visualizations with D3.js

D3.js is a visualization library that runs in the browser. Hierarchy trees, force layouts, map-based views, hover-reactive diagrams, zoomable timelines — the elaborate graphics you see in newspapers and investigative reporting are usually D3.

It takes time to learn. It has its own concepts, data binding and selections, and self-taught it is a long road.

Through AI, that shrinks. Ask "draw this JSON as a D3 force layout, color the nodes, show info on hover, zoom enabled" and JavaScript you can paste into a page comes back. The grammar need not be memorized.

Everyday aggregation charts are covered by matplotlib or Altair. D3 suits elaborate custom visualization. Pick by purpose.

Drive Blender from Python

Blender is a free, open-source 3D production suite. Models, animation, rendering, and video editing are all in it, but the menu is vast and the shortcuts alone are a long road. It is in Debian 13's apt.

That same Blender exposes every feature to Python (bpy). Without touching the GUI, a script can build a 3D scene. Ask for "a cube with a sphere on top, light from the upper left, camera slightly below front, render to PNG" and a bpy script comes back.

Uses in business run about here.

Hand ComfyUI its workflow as JSON

ComfyUI treats generative AI such as Stable Diffusion as connected nodes. Beyond writing a prompt, it builds high-end workflows: combining several models, conditional generation, video generation, keeping a character consistent.

Wiring nodes by hand is easy to get lost in. A workflow is really a JSON file, so that is what the AI writes. Ask for "a ComfyUI workflow as JSON: take a product photo as input, replace the background with white, overlay the logo bottom-right" and loadable JSON comes back.

Uses in business run about here.

Image work that used to go to agencies and production houses now finishes in your own hands. ComfyUI needs a GPU, so it stands up not on the 2-02 machine but on the AI server of 2-16. Publish its web UI inside the company from there, and the team can use it together.

CAD can be written as code

Mechanical design runs on dedicated CAD software (SolidWorks, Inventor and the like), with cost in both learning and licensing. Alongside it runs another path: CAD written as a script or as code. The AI writes the code, so the CAD's own controls need not be learned.

Tool Language Notes
OpenSCAD Its own scripting language Long-standing, simple, one of the 3D-printing community's standards
CadQuery Python Written in Python; close to industry dimensioning concepts
Build123d Python Successor lineage to CadQuery; more natural Python expression
FreeCAD GUI + Python Full parametric CAD, scriptable in Python

Take a bracket with screw holes. "A bracket 50mm wide × 30mm tall × 3mm thick. Two ø4mm holes 10mm from the top edge, symmetric left and right. In Build123d." Run the Python that comes back and an STL file is produced. Feed it to a 3D printer and the part prints.

Uses in business run about here.

The side that used to contract it out becomes the side that builds

"It drops into your hands" is quicker to see in cases.

White backgrounds for the product photos, the same day

A small retailer photographed dozens of seasonal items. The backgrounds are cluttered and cannot go into the web catalog as they are.

A factory sensor housing, prototyped on the floor that day

A floor engineer at a small manufacturer wants a housing to protect a temperature sensor on the line.

If it does not fit, change the dimensions and the next prototype follows at once. The floor person, on the floor, runs the design cycle.

Video assets for a tourism campaign, in your own hands

A regional tourism board makes a video explaining its relocation program.

A population chart in the paper, by the reporter

A local-paper reporter wants population-decline data inside an article.

Reporters, tourism-board staff, floor engineers, small-shop owners — the people who used to be the side that contracts a production house become the side that builds.

You don't need to become a specialist. You need to become someone who handles specialist tools with AI alongside.

Keep content and design apart in business documents

Proposals, reports, specifications, internal documents, press releases — the body is the manuscript, diagrams are Mermaid, screens are HTML, the cover is SVG.

proposal-2026/
  ├── ja.adoc            # Body (manuscript)
  ├── architecture.mmd   # Structural diagram (Mermaid)
  ├── ui-mockup.html     # Screen example (HTML the AI wrote)
  └── cover.svg          # Cover page (SVG)

Python assembles these into a PDF (pandoc and weasyprint both work). Each component stands on its own and can be turned to other uses.

Design and content are separate. Fix one place and every output reflects it. What goes into git is the manuscript and the diagram text; the assembled PDF is kept separately as a build output — the same thinking as 2-07: Take Documents Back — Prose in AsciiDoc, Working Tables in a Grid, Printed Pages from Templates and its "hold the manuscript as text, and commit only the manuscript."

The AI draws; the human judges

What all these tools share: there is almost no point where a person has to draw.

What the human does is three things: put the intent into words, judge what comes back, and name the place to fix. The vocabulary for judging is the four principles from 2-12, used as they are. In a diagram: put related elements near each other (proximity), keep the arrows running the same way (alignment), use the same shape for nodes with the same role (repetition), make the main path heavier than the rest (contrast). Slides work the same way.

Don't memorize design symbols and rules. Acquire the ability to convey intent. That is the new literacy.

Held as text, it still opens years from now

An old PowerPoint file may come back with substituted fonts, shifted shapes, or not open at all. Old Adobe Illustrator .ai files may not open in current versions. A Figma design leaves your hands when the service ends.

Mermaid, Markdown, SVG, HTML+CSS are text. Their notations have barely changed since their first editions (2-10), so an old file renders in today's renderer and will go on rendering. Text is also the easier thing for an AI to read.

Formatting decorates display. Structure crosses time.

How to check you are done

This chapter is done when these five hold.

  1. A chapter's structural diagram is written in Mermaid, and GitHub or Forgejo renders it as a diagram
  2. A one-line edit to that diagram shows in git as one line added and one line removed
  3. The AI returns a screen draft, and the HTML runs in the browser when opened
  4. Markdown slides passed through Marp produce a PDF whose pages match the --- separators
  5. A business document is split into body, diagram, and screen files, and fixing the diagram in one place and rebuilding updates the PDF

What the human holds

Values the human supplies

Actions the AI states before performing

Versions checked, and when

Summary

Diagrams and documents, produced from text and code.

The everyday tools:

Specialist territory that AI brings within reach:

The principle is one. Instead of learning the GUI, have the AI write the code, look at the result, and adjust. The vocabulary for judging is the four principles from 2-12; the place the manuscript lives is 2-07 — both apply here unchanged.

The next chapter carries what you drew here — the diagrams and the enclosure — down into things you can touch, from electronics to IoT.

Related articles