501ā€™s Blog_ https://en.501story.blog/ This blog captures my journey in entrepreneurship and development. As a programmer who loves automation, Iā€™m gaining diverse development experience while using Notion to work more efficiently. Tue, 28 Jan 2025 07:28:16 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed en-US All rights reserved 2025, 501 <![CDATA[Tips for Creating Various Charts and Diagrams in Notion (with AI, Mermaid.js)]]> https://en.501story.blog/article/notion-chart-tips-ai-mermaid-js https://en.501story.blog/article/notion-chart-tips-ai-mermaid-js Sun, 20 Oct 2024 00:00:00 GMT

Notion Chat and Diagram

In Notion, you can create text-based charts and diagrams using Mermaid.js.
And don't worry if you're not familiar with Mermaid.js syntax. If you want to create a chart right away, you can utilize Notion AI.

Types of Charts

  • Basic Flowchart: The most common form, showing a process from start to finish sequentially.
  • State Diagram: Represents various states of a system and transitions between states.
  • Sequence Diagram: Shows interactions between objects in chronological order.
  • Gantt Chart: Displays project schedules and task progress in chronological order. It's useful for project management as it shows the start and end times, and duration of each task at a glance.
  • ... and more. Notion, using Mermaid.js, supports various flowcharts. Reference: Other Various Charts

How to Use Mermaid in Notion

  1. Insert a code block: Create a new block and enter the '/' command, then select 'Code'.
      2. notion image
  1. Select language: Choose 'Mermaid' from the top left of the code block.
      2. notion image
  1. Write flowchart code: Write the flowchart code according to Mermaid syntax.

Simple Mermaid Syntax

Mermaid syntax is intuitive and easy to learn. Here's a simple example of creating a basic flowchart:
This code generates a simple flowchart including a start node, a decision node, two process nodes, and an end node. Arrows indicate the flow of the process.
For detailed syntax, please refer to the official documentation.

Drawing with Notion AI

  1. AI Flowchart Generation: You can automatically generate flowcharts using Notion AI. Activate AI input by pressing space twice on the page.
  1. Content Creation: Select Make a flowchart and enter the content you want to create.Prompt: Draw a flowchart for the current pageYou can also directly ask AI to create a flowchart without selecting Make a flowchart
      2. notion image
      notion image
  1. Review and Modify Results: Review the flowchart generated by AI and manually modify if necessary. You can directly edit the Mermaid code or give additional instructions to AI.

Other Various Charts

Mermaid.js allows you to create various charts besides flowcharts. ā€£
In Notion, you can easily create various charts using tables and AI.
Official Document
Types of Charts Supported by Mermaid.js
Types of Charts Supported by Mermaid.js

Gantt Chart

Gantt charts visually represent table data, allowing you to see the duration of each task and the overall project schedule at a glance.
When you have a table like the following, you can ask AI to create a chart based on it.
Example Table
Task
Start Date
End Date
Project Planning
2024-01-01
2024-01-15
Requirements Analysis
2024-01-16
2024-01-31
Design
2024-02-01
2024-02-29
Development
2024-03-01
2024-04-30
Testing
2024-05-01
2024-05-15
Deployment
2024-05-16
2024-05-31
For databases, you can copy and convert to a table before making the request.
  1. Request to AI: Draw a Gantt chart
      2. notion image
  1. Result
    This code generates a Gantt chart based on the data from the above table. It specifies the start date and duration (in days) for each task to compose the chart.

    Drawing Pie Charts

    Pie charts are effective visualization tools that show the ratio of parts to the whole in a circular form, intuitively displaying the composition of data.
    Like Gantt charts, you can easily create them by requesting AI.
    Example Table
    Category
    Value
    A
    30
    B
    50
    C
    20
    D
    40
    E
    10
    1. Request: Draw a pie chart
        2. notion image
    1. Result

      Tips

      Using Colors

      You can add various colors to charts using Notion AI.
      1. Click the Ask AI button on the left of the flowchart.
          2. notion image
      1. Add a prompt and generate.Prompt: Add colorful colors
          2. notion image
      1. Result

        Code-Preview-Split View

        The Code, Preview, and Split View options in the top left are useful features that allow you to work more efficiently with charts in Notion.
        Using these features, you can simultaneously view the chart's code and the actual rendered result, allowing you to check and modify changes in real-time.
        notion image
        Ā 
        ]]>                 <![CDATA[Random Sorting in Notion Database]]> https://en.501story.blog/article/random-notion-database https://en.501story.blog/article/random-notion-database Mon, 14 Oct 2024 00:00:00 GMT
        šŸ˜ƒ
        I store English example sentences in a Notion database and sort them randomly for memorization. Notion doesn't provide a random sorting feature by default, but we can implement it using a small trick.

        When You Need Random Sorting in Notion

        There can be various reasons why you might need a random sorting feature in Notion:
        • When you need to display items randomly from a database
        • When you want to fairly distribute work order in team projects
        • When you want to shuffle the order of study materials or quiz questions to enhance learning effectiveness
        • When you want to randomly select and fairly analyze customer reviews or feedback

        Method for Random Sorting

        1. Create a New 'Random' Property: Add a new property to your database. Set this property type to 'Formula'.
            2. notion image
        1. Enter the Random Value Generation Formula: In the formula field of the newly created property, enter the following formula: (((((timestamp(prop("Created Time")) * 100011979) + 500067713) % 900066731) * (((timestamp(now()) * 800067089) + 800068411) % 800053967)) + 900067309) % 900066571
            2. notion image
        1. Sort by the Random Property: In the database view, sort by the newly created 'Random' property. This way, the items in the database will be randomly rearranged every time you refresh the page every minute. (This doesn't work within the blog and link)
            2. notion image

        Example

        Feel free to copy and use this database if you need it
        Click here for the database link
        Random DB
        Name
        Random
        1
        2
        3
        4
        Reference: https://www.reddit.com/r/Notion/comments/i8cuk3/random_shuffle_a_list_table/
        ]]>                 <![CDATA[Comparison of Design AI Tools]]> https://en.501story.blog/article/compare-ai-design-tool https://en.501story.blog/article/compare-ai-design-tool Fri, 11 Oct 2024 00:00:00 GMT
        šŸ˜ƒ
        While preparing for business and development, I often needed to create UI designs. Design AI tools have been quite helpful in this regard. However, each tool offers different features and requirements, so I've briefly summarized them here. Please note that this information may not be entirely accurate as I haven't used these tools extensively. Also, the AI tools may have been updated since this comparison was made.

        Visily

        • Supports Lo-fi, Hi-fi, and Diagram functionalities
        • Seems to provide AI features for flowchart and UI development
        • Doesn't appear to generate UI all at once based on the flow

        Creatie

        • Not a generative AI, but seems to use a method of easily importing numerous pre-defined components
        • Offers various basic functions
        • Can import files defined in Figma and imports them relatively well
          • Of course, the import is not perfect

        Wegic

        • Chat-based design interface
        • Has limitations in importing code

        Use Galileo

        • Most outputs tend to look similar
        • The ability to directly copy results to Figma is a big advantage
          • I subscribed for two months because of this feature
          • However, the elements copied to Figma have inconsistent hierarchy and lack coherence
        • Personally, I found it difficult to use even half of the credits when I subscribed

        Uizard

        • Creates the entire flow with AI, useful for overall flow design
          • However, only about 30% seemed actually usable
          • Still, I subscribed for three months because of this feature
        • Provides a method to import Figma components
          • Large and complex components don't seem to import well

        CraftUI

        • Haven't used it
        • Offers intuitive interface and AI-based insights

        Webcrumbs

        • Haven't used it
        • Can generate components from images and text
        • Planning to provide an open-source JavaScript plugin builder

        Motiff

        • Can be used to some extent for free
        • Heard from others that the results were satisfactory
        • Haven't used it personally

        Figma

        • Industry-standard design tool, gradually integrating AI features
        • Currently doesn't create the entire workflow at once
        • Seems usable as a Figma design support concept
        • The Figma to Code plugin that generates Flutter code makes it difficult to replace with other tools

        Conclusion

        Each design AI tool has its own characteristics, so it's best to choose based on your needs.
        Tools like Visily or Uizard are helpful for establishing overall flow, while Galileo or Figma seem more useful for actual design work.
        Ultimately, it seems effective to choose tools that fit your work style or project, and mix and match them if necessary.
        I haven't settled on just one tool yet.
        Even if generation is done with other tools, it seems difficult to move away from Figma for actual development.
        Ā 
        ]]>                 <![CDATA[Free Blog Based on Notion]]> https://en.501story.blog/article/notion-blog https://en.501story.blog/article/notion-blog Sun, 13 Oct 2024 00:00:00 GMT
        šŸ˜ƒ
        I briefly summarized my research on the possibility of free blogging using Notion's database. I looked for actively maintained open-source projects based on Next.js that support SSR and SSG.

        Comparison of Notion-based Blog (Site Generation) Open Source Projects

        Here's a brief summary of the pros and cons of each solution:

        nextjs-notion-starter-kit

        • Seems to be the most widely used
        • Development and issue resolution appear to be slow

        rotion

        • Appears to display Notion content as-is
        • Currently unable to access content within databases
        • Seems to be under active development

        morethan-log

        • Popular in Korea
        • Many features, including some Korea-specific ones
        • Unable to access basic Notion templates šŸ˜¢
          • No related issues, and overall issue management seems poor

        notion-blog

        • Last updated 3 years ago

        notion-api-worker

        • Not for site generation, but can retrieve public access Notion data via API

        notablog

        • Excellent, but not Next.js
        • Items within databases redirect to Notion

        jarocki.me

        • Generally appealing, but lacks search functionality
        • Contains useful content for OG and SEO

        NotionNext

        • Written in JavaScript but uses next.js
        • Appears to be actively updated and managed
        • In Chinese, and examples are somewhat disorganized
        • Diverse features and themes
        • No Korean language support

        Conclusion

        I chose NotionNext.
        It supports various features like OG, search, SSG, SSR, and offers diverse themes.
        It seems sufficient to customize the necessary features as needed.
        ]]>