📖 Documentation: mrshasha.github.io/docucraft
An open-source React component library for technical documentation built with Docusaurus.
The goal is simple: keep docs readable for humans while still making complex systems explorable.
I'm Jiří Šašek, a software developer from the Czech Republic working in system design, integrations, fullstack, and game development.
I learn best when there are visuals. Sites like Refactoring Guru are a masterclass in technical writing — they prove that even the most abstract patterns become clear once you pair them with a good diagram. Plain-text-only documentation makes me work significantly harder just to build a mental model that a single interactive graph could hand me in seconds.
That frustration is what started this project. I wanted Docusaurus docs that go beyond Markdown — docs with zoomable diagrams, explorable class graphs, and navigable repository maps — without requiring a separate diagramming tool or manual image exports for every update.
Docucraft gives you that. You describe your data, and the components do the rendering.
| Component | What it does |
|---|---|
MermaidDiagram |
Docusaurus Mermaid wrapper with zoom, pan, fullscreen, SVG export, and PNG export. |
ClassDiagram |
Interactive DTO/class relationship graph with focus, full, and inline modes. |
RepositoryExplorer |
Compact repository tree with file/folder icons, a detail panel, and optional relation graph. |
npm install docucraftDocucraft expects React and Docusaurus in your project. Most Docusaurus projects already have these.
npm install react react-dom @docusaurus/core @docusaurus/theme-mermaidEnable Mermaid in docusaurus.config.ts:
export default {
markdown: {mermaid: true},
themes: ['@docusaurus/theme-mermaid'],
};Then drop a component into any .mdx page:
import {MermaidDiagram, ClassDiagram, RepositoryExplorer} from 'docucraft';
<MermaidDiagram
definition={String.raw`flowchart LR
API --> Service --> Database
`}
ariaLabel="Service layer overview"
/>Subpath imports work too:
import MermaidDiagram from 'docucraft/mermaid';
import ClassDiagram from 'docucraft/class-diagram';
import RepositoryExplorer from 'docucraft/repository-explorer';Each component has its own README with full props, model shapes, and examples:
src/
index.ts
components/
ClassDiagram/
MermaidDiagram/
RepositoryExplorer/
- Every component lives in
src/components/<ComponentName>/. - Public exports are centralized in
src/index.ts. - CSS modules are copied into
distduring build. - Import from package entrypoints, not from
dist/...deep paths.
npm install
npm run typecheck
npm run build
npm run pack:checkBuild output is written to dist/.
- Create
src/components/YourComponent/. - Add
index.tsxand, if needed,styles.module.css. - Export the component and its public types from
src/index.ts. - Add a package subpath export in
package.jsonif direct imports should be supported. - Add a
README.mdinside the component folder with props, model shapes, and an example. - Run the full prepublish checks.
npm run typecheck
npm run build
npm run pack:check
git diff --check
git status --shortAlso verify:
package.jsonversion is new and matches the intended release.CHANGELOG.mddescribes the release.npm pack --dry-runincludes the expected files only.- No generated tarball or local test artifact is committed.
Publish:
npm login
npm publish --access public
git tag vX.Y.Z
git push origin main --tagsGood documentation tooling is a community effort. If you find Docucraft useful, have an idea for a new component, or just want to share how you're using it:
- Open an issue to report a bug or suggest a feature.
- Start a discussion on the GitHub Discussions tab — I'd love to hear what kinds of docs you're building and what's missing.
- Open a pull request — contributions are very welcome. See CONTRIBUTING.md for guidelines.
MIT. See LICENSE.
Copyright (c) Jiří Šašek.