diff --git a/README.md b/README.md index 2409525..0216bd3 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,49 @@ -# Obsidian File Color +# Obsidian X86 Flow Graph -![Obsidian File Color Banner](./docs/images/hero-rounded.png) +![Obsidian File Color Banner](./docs/images/x86.png) ## What is this? -This is a plugin for [Obsidian](https://obsidian.md), which allows you to select colors for your files and folders in the file explorer. + +This is a plugin for [Obsidian](https://obsidian.md), that converts x86 assembly into a flow diagram using Obsidian Canvases ## Usage -Setting the color for a file or folder is done by right clicking on the file in the file explorer and selecting `Set color`. This opens a modal where you can select all the colors defined in the plugin palette. +This plugin adds a command called `x86-create-flow-diagram`. To use this plugin you must highlight a valid x86 code block (without the \`\`\` at the start and end) and run the command. -![Setting a color](./docs/images/set-color-rounded.gif) +This plugin requires a specific format for the assembly in order to properly generate nodes and edges for the flow graph. + +The key format features are as a follows: + + 1. All instructions must be indeneted + 2. Location for jumps must have no spaces before the location name + 3. jmp instruction must be used for unconditional jumps (1 branch) + 4. any other instruction beginning with a j is treated as a conditional jump (2 branches) + +This is an example of a valid x86 code block for use with this plugin + +```x86 + cmp [ebp+var_8], 1 + jz loc_401027 + cmp [ebp+var_8], 2 + jz loc_40103D + cmp [ebp+var_8], 3 + jz loc_401053 + jmp loc_401058 +loc_401027 + Code for case 1 + jmp loc_401058 +loc_40103D + Code for case 2 + jmp loc_401058 +loc_401053 + Code for case 3 +loc_401058 + Program end +``` + +running `x86-create-flow-diagram` on the above codeblock would result in the following graph being produced: + +![Sample Graph #1](./docs/images/graph1.png) ### Changing the palette diff --git a/docs/images/graph1.png b/docs/images/graph1.png new file mode 100644 index 0000000..b758a33 Binary files /dev/null and b/docs/images/graph1.png differ diff --git a/docs/images/x86.png b/docs/images/x86.png new file mode 100644 index 0000000..3f26e7c Binary files /dev/null and b/docs/images/x86.png differ diff --git a/src/index.ts b/src/index.ts index 291cc20..afc90fa 100644 --- a/src/index.ts +++ b/src/index.ts @@ -26,18 +26,6 @@ export default class MyPlugin extends Plugin { async onload() { await this.loadSettings(); - // This creates an icon in the left ribbon. - const ribbonIconEl = this.addRibbonIcon('dice', 'Sample Plugin', (evt: MouseEvent) => { - // Called when the user clicks the icon. - new Notice('This is a notice!'); - }); - // Perform additional things with the ribbon - ribbonIconEl.addClass('my-plugin-ribbon-class'); - - // This adds a status bar item to the bottom of the app. Does not work on mobile apps. - const statusBarItemEl = this.addStatusBarItem(); - statusBarItemEl.setText('Status Bar Text'); - // This adds a simple command that can be triggered anywhere /*this.addCommand({ id: 'run-x86-parser', @@ -80,7 +68,7 @@ export default class MyPlugin extends Plugin { });*/ // This adds an editor command that can perform some operation on the current editor instance this.addCommand({ - id: 'create-flow-diagram', + id: 'x86-create-flow-diagram', name: 'Convert x86 assembly into a flow diagram on a canvas', editorCallback: (editor: Editor, view: MarkdownView) => { console.log(editor.getSelection()); @@ -118,37 +106,10 @@ export default class MyPlugin extends Plugin { console.log("{ \"nodes\":"+JSON.stringify(nodes) + ",\"edges\":" + JSON.stringify(edges) + "}") } }); - // This adds a complex command that can check whether the current state of the app allows execution of the command - this.addCommand({ - id: 'open-sample-modal-complex', - name: 'Open sample modal (complex)', - checkCallback: (checking: boolean) => { - // Conditions to check - const markdownView = this.app.workspace.getActiveViewOfType(MarkdownView); - if (markdownView) { - // If checking is true, we're simply "checking" if the command can be run. - // If checking is false, then we want to actually perform the operation. - if (!checking) { - new SampleModal(this.app).open(); - } - - // This command will only show up in Command Palette when the check function returns true - return true; - } - } - }); // This adds a settings tab so the user can configure various aspects of the plugin this.addSettingTab(new SampleSettingTab(this.app, this)); - // If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin) - // Using this function will automatically remove the event listener when this plugin is disabled. - //this.registerDomEvent(document, 'click', (evt: MouseEvent) => { - // console.log('click1', evt); - //}); - - // When registering intervals, this function will automatically clear the interval when the plugin is disabled. - this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000)); } onunload() {