Welcome to the Onshape forum! Ask questions and join in the discussions about everything Onshape.
First time visiting? Here are some places to start:- Looking for a certain topic? Check out the categories filter or use Search (upper right).
- Need support? Ask a question to our Community Support category.
- Please submit support tickets for bugs but you can request improvements in the Product Feedback category.
- Be respectful, on topic and if you see a problem, Flag it.
If you would like to contact our Community Manager personally, feel free to send a private message or an email.
FeatureScript Standard Library Visualizer
S1mon
Member Posts: 4,022 PRO
I built a tool (or more accurately vibe coded a tool) to visualize the Onshape Standard FeatureScript library. This is very new, and I'm sure there are some weird things about it. Let me know what works and what doesn't. For each module, it shows what's imported/exported, a link to the documentation, the cad.onshape.com link to the module, and lots lots more…
Simon Gatrall | Product Development, Engineering, Design, Onshape | Ex- IDEO, PCH, Unagi, Carbon | LinkedIn
Tagged:
4
Comments
Wow, that's a great idea, and pretty feature dense already. Curious which framework you used/was suggested by llm, if any, and how you decided on that?
Prompt 1 to ChatGPT 5.3 Pro:
"Can you read this, and think of how a visualizer might be helpful for the standard library for Onshape FeatureScript?
https://jimmyhmiller.com/learn-codebase-visualizer
https://cad.onshape.com/FsDoc/index.html"
Prompt 2:
"What language and platform(s) would a visualizer run on? Can you help write a prompt for Codex to create a basic one?"
Answer from ChatGPT:
Title: FeatureScript stdlib visualizer MVP (import/re-export graph)GoalBuild a minimal tool that indexes the Onshape FeatureScript standard library (.fs files) and serves a browser UI to explore an import/re-export graph.
Target user flowUser has a local folder containing FeatureScript stdlib sources (e.g., a git clone of javawizard/onshape-std-library-mirror, preferably the without-versions branch).User runs: npm installUser runs: npm run index -- --root <PATH_TO_STDLIB>User runs: npm run devBrowser opens a graph viewer showing modules and import/re-export edges. Clicking a node shows details.Tech choices (use these)Monorepo not required; single package is fine.TypeScript everywhere.Vite + React for UI.Cytoscape.js for graph rendering (pan/zoom, click selection).Node.js script to crawl + parse .fs files and emit JSON consumed by the UI.Parsing requirements (MVP)Recursively find all *.fs files under --root.Parse FeatureScript import statements of the form:import(path : "…", version : "…");
export import(path : "…", version : "…");
There may be whitespace/newlines; version may be "" or a number string. Ignore version content.
For each file, record:filePath (absolute or root-relative)modulePath (the string inside path : "…", if present in imports; otherwise infer module name from file name)imports: list of target module paths from non-export importsreexports: list of target module paths from export importsOptional (nice-to-have, but keep simple)Extract exported symbol names with lightweight regex for:export function NAME
export type NAME
export predicate NAME
export enum NAME
export const NAME
Store these in the node details panel.
Output formatWrite UI-consumable JSON to: public/graph.jsonUse Cytoscape element format, e.g.:{
"elements": {
"nodes": [{ "data": { "id": "onshape/std/geometry.fs", "label": "geometry.fs", "filePath": "...", "exportCount": 12, ... } }],
"edges": [{ "data": { "id": "e1", "source": "A", "target": "B", "kind": "import" } }]
}
}
Node id should be a stable string; prefer the root-relative file path OR the module path string if consistent.UI requirementsFull-screen graph view with pan/zoom.Left sidebar:search box (filters nodes by substring match on label/id)list of matching nodes (click selects and centers)Right sidebar (or bottom panel):selected node details: id, filePath, counts, lists of imports/reexports (clicking a referenced module selects it)Visual distinction:Edge kind "import" vs "reexport" should be visually distinct (e.g., dashed vs solid).You can keep node styling minimal.Repo layout (suggested)/src (React app)/tools/indexer.ts (Node script)public/graph.json (generated)package.json scripts:"dev": vite"build": vite build"index": tsx tools/indexer.ts (or ts-node) with args parsing"preview": vite previewAcceptance criterianpm run index -- --root <dir> completes without errors on a real stdlib tree and produces public/graph.json.npm run dev loads the graph and renders nodes/edges.Clicking nodes and sidebar navigation works.README.md explains setup and includes an example command using a local stdlib clone path.Implementation notesKeep parsing regex-based; no need for a full FeatureScript parser.Be careful to not treat commented-out imports as real (best effort: strip // line comments and /* */ blocks before regex).Handle duplicate edges gracefully (dedupe).If graph is huge, still load it; don’t over-optimize—this is MVP.Please implement the full project, create all files, and verify by running:npm installnpm run index -- --root <some placeholder path; if not available, at least run the script with an empty temp folder and show it handles it>npm run buildAfter that, there was a lot of dialing in of UX/UI, and adding the links to the docs and codebase, but surprisingly easy. Part of a day's work.
Simon Gatrall | Product Development, Engineering, Design, Onshape | Ex- IDEO, PCH, Unagi, Carbon | LinkedIn
Got it, great use of ai, thanks for sharing the insights!
Wonder if it could build using deno? Then you could ask it for an executable on linux or windows.
@billy2
I'm sure it could make a version that would run locally. I already have a dev server running as localhost on my Mac. I'm sure it could be packaged up in Electron or something like that. That would be a huge bloat. Maybe there's a much better way. I could always ask it.
The real question I have is why do you want an executable for Linux or Windows? If you're already on Onshape, you're online, and this visualizer works on the web too.
Can you tell me more about why?
Simon Gatrall | Product Development, Engineering, Design, Onshape | Ex- IDEO, PCH, Unagi, Carbon | LinkedIn
I updated the site to add node styling options for various metrics. Basically it can scale the dots by various attributes.
Simon Gatrall | Product Development, Engineering, Design, Onshape | Ex- IDEO, PCH, Unagi, Carbon | LinkedIn
It's obvious that ChatGPT choose node to produce this. I'm learning deno and wondering if a simple prompt change would work.
Could ChatGPT create something as good using deno?
Did you download the fs library locally or is ChatGPT able to access OS and it's data in the cloud. Does your program work if you logout of OS?
This is really interesting that you built this from prompts. The graph and interface look really good.
I already have a local clone of a GitHub repo to run the analysis and referencing for developing new features. The clone is of:
https://github.com/javawizard/onshape-std-library-mirror
This visualizer doesn't need an Onshape login except to follow the links to the standard library source. In theory, I could make that go to the appropriate GitHub link instead, but presumably not necessary for someone using this.
I think I have an automatic process set up to update the database once a week.
The AI tools seem to really be changing rapidly from everything I read. It also really helps to pay for the Pro versions of ChatGPT or Claude. $200/month is either really cheap or really expensive depending on your frame of reference.
If you think this is impressive, you should see the math going into the custom features I'm developing. It seems like I'm getting a PhD level person to help me write out algorithm specs (ChatGPT 5.2 Pro) and a mid-level programmer (GPT-5.3-Codex/Extra High) who doesn't get tired to implement the code. The biggest challenge is avoiding adding a lot of helper functions every time there's a bug or new ask. I've started getting another "agent" to review the code for refactoring opportunities. The agents are writing documentation and keeping track of development steps.
Simon Gatrall | Product Development, Engineering, Design, Onshape | Ex- IDEO, PCH, Unagi, Carbon | LinkedIn
Awesome Idea. I've been wanting one of these that maps relationships in a project so you can get the IRL version of the maps I show in this video about project planning. May wanna pick your brain on the process at some point.
The Onsherpa | Reach peak Onshape productivity
www.theonsherpa.com
It can be done, but it would mean something needs to run on a server somewhere. It could be local, but the best experience is probably as an Onshape App, with a cloud server. At least that's the preliminary scoping exercise from ChatGPT. Happy to chat more about it with you.
Simon Gatrall | Product Development, Engineering, Design, Onshape | Ex- IDEO, PCH, Unagi, Carbon | LinkedIn
I need to step up my game. I've been using AI to generate functions and then threading it into my own code. I think this is amazing, but you're taking it to a higher level. Just ask AI to create a freak'n website.
Onshape's feature library is public. It's probably better to use the github backup.
A while back OS was concerned about people ringing it's servers for the same data. They do offer a webhook and will notify you when something changes? I've never used it, but this would be a preferred method versus pinging a server for the same source file. I'm wondering if github will send your server a notice. Setting up a crontab to update data seems tedious and non-productive.
I'm working slowly on a new website and looking at various methods for hosting: google, digital ocean, github & deno deploy. I liked github because vscode runs in the cloud and I wouldn't have any files locally on my computer. My issue with it is that it's kludgy with it's linux/windows interface. I'm thinking of using deno.deploy.
Deno just announced a new version that can sandbox lmm generated code and a way to manage secrets. Eventually you'll need a way to manage api secrets and not expose them to AI generated code.
Watching Deno's latest deploy youtube video, AI is going to be a big deal. I think you're onto something.
Evan-
What you're thinking about is huge especially for large projects.
As an old SW var, some guy from an insurance company, what?, wrote a program that mapped out an entire SW project recursively mapping out down to all the drawing dependencies. He ended up giving it to all the vars because how do you distribute it? It was beautiful but no one ever used it.
I remember going into a customer and spending hours trying to figure out where the top of their model structure was located. Few companies are organized.
I don't think people want to be organized, that's not the way I run my projects. I've seen your videos on this subject and I totally agree with your methods. Keep spreading the word.
Simon-
After reading up on AI vibing, I prompted Gemini
"how do I protect osx when vibe coding with lmm"
The best way is to use a remote server as you are, but many aren't. If you are using localhost to run vibe lmm, create a new user without admin privileges and use that user login.
Why? Most web programs use node which has rights to osx. It's easy to shell out and say destroy the hard drive. Hopefully you'll only lose that user and can login as root/admin.
The cloud is becoming the wild west and security is so important. Please, everyone, stop complaining about logging into a cloud app.