UML & Class Diagrams

Render Mermaid.js diagrams in your API Docs.

printing press renders Mermaid.js content in two ways:

Fenced code blocks in OpenAPI markdown descriptions.
Auto-generated class diagrams on model pages when schema relationships exist.

Mermaid in markdown

Put a Mermaid fenced code block in any OpenAPI field that supports markdown, such as info.description, operation descriptions, or schema descriptions.

```mermaid
graph TD
  Search --> Book
  Book --> Pay
```

printing press will turn that fence into a rendered Mermaid block with a plain code fallback.

Rendering of generated mermaid JS diagram — Auto render Mermaid UML Diagrams with a super stylish set of themes.

The fence language must be mermaid. Empty Mermaid fences are ignored.

Generated class diagrams

Model pages will include generated Mermaid class diagrams for complex schemas with one or more relationships.

Some common relationship sources include:

Direct $ref properties
Array items that reference another schema
Composed schemas using allOf, anyOf, oneOf

Simple scalar schemas and flat objects with only primitive properties do not get generated class diagrams. Not because we can’t, but because there is no point.

Rendering of generated mermaid JS class diagram — An example class diagram generated automatically for the `BookingPayment` class.

Dependency explorer

Model pages may also include a dependency explorer when graph data is available.

If a model is complex (has ancestors, siblings or descendants) then an object graph will be generated, rendering the dependency graph of that object. Everything that is upstream (ancestor) is dimmed, everything downstream is not.

Rendering of generated dependency explorer — See the upstream and downstream relationships between objects

When both a generated class diagram and graph data are present, printing press shows both views in tabs:

CLASS DIAGRAM
DEPENDENCY EXPLORER