# The Markdown Playground — Diagrams, Tables, Code, and Linked Chapters

## Document Directory

This paste contains 3 documents:

- [README.md](https://marke.st/p/01M33SG6MG38HYTQG4Z4MX790F/README.md) ← (current)
- [chapters/first-guide.md](https://marke.st/p/01M33SG6MG38HYTQG4Z4MX790F/chapters/first-guide.md)
- [code/chapter.ts](https://marke.st/p/01M33SG6MG38HYTQG4Z4MX790F/code/chapter.ts) (code)

---

## README.md

# More than a wall of text.

**MARKE.ST FORMAT LAB / RICH MARKDOWN / MERMAID / CODE / FOLDERS**

One plain-text document can carry a useful visual explanation. This playground combines headings, tables, task lists, quotes, highlighted code, a Mermaid flowchart, and links into nested documents.

> **Original fictional example.** The project, workflow, and counts below are invented. This is a formatting playground, not a live project dashboard.

## A plan you can scan

| Piece | Purpose | Example status |
|---|---|---|
| Welcome page | Explain the imaginary app | Ready |
| Getting-started chapter | Give readers a first task | Ready |
| Release checklist | Define the review | Draft |

**Readable first.** Bold text highlights the decision. *Italic text* adds emphasis. Inline `code` distinguishes file paths and identifiers from ordinary prose.

## A diagram that lives with the words

```mermaid
flowchart LR
    A[Write a useful guide] --> B[Add code and examples]
    B --> C[Review the whole collection]
    C --> D[Choose the audience]
    D --> E[Share the link]
```

Text equivalent: write the guide, add examples, review the collection, choose its audience, and share the link. The diagram is a visual version of the same sequence—not its only accessible explanation.

## Task lists, without pretending to be a task database

- [x] Keep the fictional example clearly labeled.
- [x] Put supporting files in the same collection.
- [ ] Check the published page on a narrow screen.
- [ ] Replace the sample content with your own approved material.

These marks are document content. Do not assume the reader's clicks become persistent project updates.

## A code block with an explanation

```typescript
type ReadingState = "draft" | "review" | "ready";

const chapter: { title: string; state: ReadingState } = {
  title: "Your first guide",
  state: "review",
};
```

The full source appears as a separate `.ts` document too. A code example can be useful without executing inside the reader.

## Chapters, not an endless scroll

```text
README.md
chapters/
  first-guide.md
code/
  chapter.ts
```

[Read the next chapter](chapters/first-guide.md) · [Open the TypeScript file](code/chapter.ts)

Relative Markdown links let the explanation and its supporting files travel together. Use the document tree to explore the same structure.

## Pick the right format

| Use Markdown for | Use a separate HTML document for |
|---|---|
| Documentation that stays easy to edit | A custom layout and inline styling |
| Linked chapters and reference tables | An interactive, self-contained demo |
| Diagram source alongside an explanation | A visual editorial report |

HTML pasted into a Markdown document is not the same as an HTML document. For a runnable page, save it with an `.html` path and check its behavior in the hosted sandbox.

## Your turn

```text
Use this as a formatting pattern, not as a source of factual claims.
Create a new unlisted Marke.st guide with a README, a nested chapter,
a Mermaid flowchart plus a text explanation, a useful comparison table,
and a separate code file. Keep the sample fictional. Return the real URL.
```

Feature reference: [Marke.st's rendering and document overview](https://marke.st/). Specific plan limits and rendering can change; preview your actual content.

---
[Browse the example gallery](https://marke.st/p/01M33R91CGF13BZC4KDXT2M418) · [Make your own](https://marke.st)