Skip to content

Commit 3ef7f47

Browse files
devalogfern-support
devalog
and
fern-support
authored
Add new How it works page, plus diagram (Docs) (#775)
Co-authored-by: Fern Support <[email protected]>
1 parent 6127e9c commit 3ef7f47

File tree

2 files changed

+141
-0
lines changed

2 files changed

+141
-0
lines changed

‎fern/products/docs/docs.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ navigation:
33
contents:
44
- page: Overview
55
path: ./pages/getting-started/overview.mdx
6+
- page: How it works
7+
path: ./pages/getting-started/how-it-works.mdx
68
- page: Quickstart
79
path: ./pages/getting-started/quickstart.mdx
810
- page: Project structure

‎fern/products/docs/pages/getting-started/how-it-works.mdx‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
---
2+
title: How Fern Docs work
3+
description: Learn how Fern transforms your API specifications and documentation into a unified developer experience
4+
---
5+
6+
Fern combines your API specifications, static Markdown files (like how-to guides and tutorials), media assets (images, videos, etc.), and custom settings defined in your `docs.yml` file to generate a beautiful, interactive hosted documentation site.
7+
8+
This process is built around two major workflows: **editing** and **deploying** your documentation.
9+
10+
<Accordion title="System architecture">
11+
12+
This diagram shows the technical infrastructure that powers the documentation generation process.
13+
14+
```mermaid
15+
flowchart TD
16+
%% Input sources at the top
17+
subgraph inputs ["Input Sources"]
18+
API["API Specs"]
19+
DOCS["Docs.yml"]
20+
MDX["MDX files"]
21+
MEDIA["Media content"]
22+
end
23+
24+
%% Generation process
25+
GENERATE[["fern generate<br/>--docs"]]
26+
27+
%% AWS VPC section
28+
subgraph vpc ["Fern AWS VPC"]
29+
direction LR
30+
MICROSERVICE["Fern Docs<br/>microservice"]
31+
DATABASE[("Database")]
32+
S3[("S3")]
33+
end
34+
35+
%% External services
36+
SERVICES["External Services<br/>(UpStash, Algolia, PostHog,<br/>TurboPuffer, AI Inference)"]
37+
38+
%% Vercel hosting
39+
subgraph vercel ["Vercel"]
40+
direction LR
41+
STATIC["Static site"]
42+
EXPLORER["API explorer"]
43+
EDGE["Vercel Edge<br/>(Middleware)"]
44+
end
45+
46+
%% External connections as hexagons
47+
CLOUDFLARE{{"Cloudflare (CORS)"}}
48+
WORKOS{{"WorkOS"}}
49+
CUSTOMER{{"Customer API"}}
50+
51+
USER(("User"))
52+
53+
%% Vertical flow connections
54+
API --> GENERATE
55+
DOCS --> GENERATE
56+
MDX --> GENERATE
57+
MEDIA --> GENERATE
58+
59+
GENERATE --> MICROSERVICE
60+
MICROSERVICE --> SERVICES
61+
SERVICES <--> STATIC
62+
63+
STATIC --> CLOUDFLARE
64+
EXPLORER <--> CLOUDFLARE
65+
EDGE <--> WORKOS
66+
67+
CLOUDFLARE --> CUSTOMER
68+
EDGE <--> USER
69+
70+
%% Internal connections
71+
MICROSERVICE -.-> DATABASE
72+
MICROSERVICE -.-> S3
73+
```
74+
</Accordion>
75+
76+
## Content workflows
77+
78+
You can update your documentation in two ways:
79+
80+
- **Direct editing**: Open a pull request directly in the [GitHub repository that contains your docs](/learn/docs/getting-started/project-structure) (including your `docs.yml` configuration and Markdown files).
81+
- **Visual Editor**: Use Fern's [Visual Editor](/learn/docs/writing-content/visual-editor) to modify your docs without touching code. The Fern GitHub App fetches the current state from your docs repository and passes it to the Visual Editor. When you submit changes, the Fern GitHub App automatically opens a pull request for review.
82+
83+
After the update goes through your review process, an approver can merge it.
84+
85+
## Deployment workflows
86+
87+
When a pull request is merged into your docs repository, an automated pipeline transforms your content into a live documentation site and syncs it with your API changes in three main stages:
88+
89+
<Steps>
90+
91+
### Trigger GitHub Action and fetch API specs
92+
93+
The merged PR triggers a Fern GitHub Action. The action retrieves your API specification from a separate repository using secure token authentication. The GitHub Action only has access to the specific docs repository from which it's running.
94+
95+
### Generate and process content
96+
[The Fern CLI](/learn/cli-api-reference/cli-reference/overview) runs `fern generate --docs` to merge your API specs with documentation content. Behind the scenes, this process involves several key components:
97+
98+
- **Input processing**: The system combines your API specification files, `docs.yml` configuration file, `.mdx` files, and media content.
99+
- **Core infrastructure**: The generation process runs on Fern's AWS VPC infrastructure, where the Fern Docs microservice acts as the central orchestrator. This microservice coordinates content processing while connecting to a database for storing indexed content and S3 for asset storage.
100+
- **Content indexing**: During generation, Fern automatically indexes your documentation content to enable search functionality across your entire site. This indexing integrates with external services: [Algolia](/learn/docs/customization/search) for advanced search capabilities, UpStash for caching, PostHog for analytics, TurboPuffer for vector storage, and AI inference services (Bedrock, Claude) for intelligent content processing.
101+
102+
### Deploy to hosting platform
103+
104+
The processed content is deployed to Vercel as a documentation site with an embedded [API explorer](/learn/docs/api-references/api-explorer/overview) that allows users to test endpoints directly within the documentation.
105+
106+
Vercel Edge middleware handles the underlying routing, authentication, and performance optimization.
107+
108+
The deployed documentation site integrates with external systems like Cloudflare for CORS management and WorkOS for enterprise authentication.
109+
110+
111+
</Steps>
112+
113+
<Accordion title="Editing and deployment workflows">
114+
115+
This diagram shows how content flows from editing to deployment.
116+
117+
```mermaid
118+
flowchart TD
119+
FVE[Fern Visual Editor]
120+
U[User]
121+
DR[Docs Repo]
122+
CLI[Fern CLI]
123+
Decision{Make a PR or edit in Visual Editor?}
124+
Spec((API Spec Repo))
125+
GA[GitHub Actions]
126+
127+
U ==> Decision
128+
Decision == Make edit ==> FVE
129+
Decision == Open and Merge PR ==> DR
130+
131+
FVE <== Fetches state and opens PR ==> DR
132+
DR == ① Merged PR triggers deployment flow ==> GA
133+
134+
Spec <-. ② Fetches and merges API spec .-> GA
135+
136+
GA == ③ Triggers doc regeneration ==> CLI
137+
CLI == ④ Deploys updated docs ==> Server[Fern Docs Server]
138+
```
139+
</Accordion>

0 commit comments

Comments
 (0)