# Markdown Editor and Knowledge Graph Notes App

**URL:** <https://the.fmsoup.org/t/markdown-editor-and-knowledge-graph-notes-app/4797>\
**Category:** Tips and Techniques\
**Tags:** web\_viewer, javascript, markdown\
**Created:** [April 6, 2025, 1:46pm UTC](https://the.fmsoup.org/t/markdown-editor-and-knowledge-graph-notes-app/4797 "2025-04-06T13:46:38Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![greenflux](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/greenflux/32/3171_2.png) [@greenflux](https://the.fmsoup.org/u/greenflux)\
**Post date:** [April 6, 2025, 1:46pm UTC](https://the.fmsoup.org/t/markdown-editor-and-knowledge-graph-notes-app/4797/1 "2025-04-06T13:46:38Z")

</div>

Here's a guide on how to build a Markdown editor with code syntax highlighting, and a knowledge graph, like in Obsidian. I used Marked.js and Prism.js for the editor, and Vis.js for the network graph.

> **[Vis.js Knowledge Graph in FileMaker](https://blog.greenflux.us/markdown-editor-and-knowledge-graph-notes-app-with-visjs-in-filemaker-pro)**
>
> Build a Markdown editor and interactive knowledge graph in FileMaker Pro using Vis.js, Marked.js, and Prism.js. Explore data with a network view

 ![Screenshot 2025-04-06 at 6.15.12 AM](https://canada1.discourse-cdn.com/flex030/uploads/fmsoup/original/2X/6/63bd49f934f66fcc4496cfcd258fcbe84d6c4cc2.png)  
 ![Screenshot 2025-04-06 at 4.32.14 AM](https://canada1.discourse-cdn.com/flex030/uploads/fmsoup/original/2X/2/280fc68ac2ef31a0757c5561c9ef47e467a36361.jpeg)