Copy-paste-ready patterns for creating rich, interactive content in Databricks notebooks using %md-sandbox cells. No cluster, no Python, no widgets required — just HTML, CSS, and JavaScript rendered directly in the notebook.
Databricks notebooks don't have to look like plain markdown. With %md-sandbox, you can build presentation-quality documentation, architecture guides, onboarding materials, and interactive training content — all version-controlled and living next to your code. Ditch the slide deck; make the notebook the deliverable.
| # | Notebook | What's Inside |
|---|---|---|
| 01 | Intro | Overview, navigation, and the case for Diagrams as Code |
| 02 | Icons | Inline vendor logos from Simple Icons, Twemoji, Devicon, and Iconify (AWS, Azure, GCP, Databricks, Spark, Kafka, dbt, and more) |
| 03 | Admonitions | Eight styled callout boxes — info, note, warning, error, success, tip, config, and goal |
| 04 | Code Blocks | Syntax-highlighted code with copy-to-clipboard via Prism.js (SQL, Python, Scala, Bash, YAML, JSON, R, Markdown) in light and dark themes |
| 05 | Mermaid | Client-side diagrams — flowcharts, sequence, class, state, ER, Gantt, pie, git graph, and mindmap |
| 06 | PlantUML | UML diagrams from text — sequence, use case, class, activity, component, state, and deployment |
| 07 | C4-PlantUML | C4 architecture diagrams — context, container, component, dynamic, and deployment views |
| 08 | Gamification | Interactive quizzes, progress trackers, and challenge widgets for training and onboarding |
| 09 | Images & Carousels | Image carousels with dot navigation, tabbed screenshot viewers, and an embedded PDF slideshow via PDF.js |
| 10 | Additional Div Magic | Accordion cards, 3D flip cards, category grid cards, and gradient info panels — with annotations explaining how each pattern works |
| Technology | Used For |
|---|---|
| Simple Icons | SVG brand/vendor icons |
| Twemoji | Cross-platform emoji rendering |
| Devicon | Developer tool and language icons |
| Iconify | Unified icon API across 100+ icon sets |
| Prism.js | Syntax highlighting with copy button |
| Mermaid | Client-side diagram rendering (nothing sent externally) |
| PlantUML | Server-side UML rendering |
| C4-PlantUML | C4 model architecture diagrams |
| PDF.js | In-notebook PDF slideshow viewer |
- Clone or fork this repo
- Import the notebooks into your Databricks workspace (
Workspace > Import) - Open any notebook — each is self-contained with working examples
- Copy the cells you like into your own notebooks and change the content
Mermaid diagrams render entirely client-side — nothing leaves the browser. PlantUML and C4-PlantUML diagrams are sent to the public plantuml.com server for rendering. Do not include sensitive or confidential information in PlantUML diagrams. For sensitive content, use Mermaid or deploy your own PlantUML server.
Got a clever %md-sandbox pattern? A better way to do something shown here? We'd love to see it.
- Open a pull request with your pattern
- File an issue with ideas or feedback
- Star the repo if you find it useful
The best notebook hacks come from practitioners solving real problems — share yours and help the community level up.
MIT License — feel free to use these patterns in your own projects.