DevKitBase is a cross-platform desktop application built by integrating Gatsby and Electron.
It combines the flexibility of web technologies with the persistent environment of Electron, offering a powerful and multifunctional toolkit to boost developer productivity.
This application leverages a refined React + Bootstrap UI and visualization libraries like D3.js and Vanta.js to deliver a rich set of tools:
- Project management with Gantt charts, ToDo lists, and time tracking
- Thinking and planning support with mind maps, Mandala charts, and 5W1H editors
- Technical documentation tools, such as Markdown notes, PlantUML, and i18n JSON editors
- Developer utilities including DB design, license checkers, graph generators, and web tools
The UI is fully optimized for dark mode and desktop interaction.
Although PWA-compatible and launchable on smartphones, it is not optimized for mobile screen layouts, and its usability on mobile is limited.
DevKitBase follows a local-first design philosophy, ensuring that user data is never sent externally by default.
However, the following features involve external communication:
-
PlantUML Renderer
Generates UML diagrams using an external PlantUML server (requests image via URL) -
JavaScript License Checker
Retrieves library metadata via unpkg CDN API
All other features operate entirely in the local environment, ensuring that your work, ideas, and data remain private.
- Netlify
# Clone and enter the directory
git clone https://github.com/yourusername/devkitbase.git
cd devkitbase
# Install dependencies
npm install
# Build Gatsby → Fix paths → Copy to Electron dist
npm run build
# Build Electron app (NSIS, DMG, AppImage, etc.)
npx electron-builder
# Start in development mode (Gatsby + Electron)
npm run dev| Feature | Description |
|---|---|
| Home | Central landing page with navigation to each tool. |
| Settings | Local data reset, backup, and restore. |
| Zen-mode | Relaxation mode using Vanta.js or particle backgrounds. |
| Feature | Description |
|---|---|
| Gantt Chart | Visual project timeline powered by D3.js. |
| ToDo | Simple task list with checkbox support. |
| ToDo Time | ToDo list categorized by time span (today / week / month / year). |
| Requirement / Design / Dev / Test / Deploy ToDo | ToDo sections aligned to development phases. |
| SWOT ToDo | Task planning using SWOT analysis. |
| PDCAs | Compare PDCA / OODA / STPD / DCAP in vertical grid layout. |
| Feature | Description |
|---|---|
| Time Manager | Work & break timers with chart visualization. |
| Memo | Markdown-style multi-tab memo with local persistence. |
| Mind Map | Hierarchical mind map using D3.js. |
| Mandala Chart | Japanese 9-grid idea organization tool. |
| 5W1H | Separate inputs for Who / What / When / Where / Why / How. |
| Graph Generator | Visualize number arrays as bar/line/pie charts. |
| Feature | Description |
|---|---|
| Directory Mapper | Convert indented text to directory tree (Markdown exportable). |
| i18n JSON Editor | Syntax-highlighted editor for multilingual JSON files. |
| PlantUML Tool | Input UML text and render diagrams via external PlantUML server. |
| DB Designer | GUI-based table & column schema designer. |
| Feature | Description |
|---|---|
| JavaScript License Checker | Extract licenses from pasted package.json using unpkg. |
| WebHopper | Save, manage, and launch sets of frequently used URLs. |
| Text Converter | Convert line-separated text into Markdown, HTML, SQL, etc. |
| Clipboard Grid | Edit and copy multi-line data in a structured grid format. |
| Dice Roller | Randomly choose one from six options. |
| Feature | Description |
|---|---|
| Dev Ledger | Track cost/revenue logs by project. |
現在、このソフトウェアは 日本語のみ対応 しています。
今後、英語版・中国語版などの翻訳対応 も視野に入れています。
翻訳や国際化対応にご協力いただける方がいらっしゃいましたら、
ぜひ Issue や Pull Request にてご連絡ください。
OSSとして一緒に育てていただける仲間を歓迎します。
目前，本软件仅支持日语界面。
未来计划支持英文、简体中文等多语言翻译。
如果您有兴趣参与本项目的翻译或国际化工作，
欢迎通过 Issue 或 Pull Request 与我们联系。
我们欢迎愿意共同成长 OSS 项目的协作者。
Currently, this software only supports the Japanese interface.
We are planning to support English, Simplified Chinese, and other languages in the future.
If you are interested in helping with translation or localization,
please reach out via Issue or submit a Pull Request.
We warmly welcome contributors who want to help grow this OSS project together.